在學習一些javaScript效果，做一些實現效果筆記，順便整理一下思路。
LightBox效果實現：
<!DOCTYPE html><meta charset="utf-8"><html><head> <title>Lightbox效果</title> <style type="text/CSS"> .black_overlay{ display: none; position: absolute; top: 0%;left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; opacity: .70; } .white_content{ display: none; position: absolute; top: 30%; left: 30%; width: 40%; height: 40%; padding: 16px; border: 16px solid orange; background-color: white; z-index: 1002; overflow: auto; }</style></head><body><a href="Javascript:void(0)" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">請單擊這里</a><div id="light" class="white_content"> 這里是lightbox的彈出框的內容<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'">關閉</a></div><div id="fade" class="black_overlay"></div></body></html>這個效果我用在了登錄注冊時，點擊按鈕跳出登錄注冊框，把登錄注冊代碼剔除body標簽放到顯示彈出框內容的地方就可以了。當然，lightbox效果還有很多用途，這個就看需要了。圖片隨鼠標移動放大效果
<!DOCTYPE html><meta charset="utf-8"><html><head> <title>圖片隨鼠標移動放大效果</title> <style type="text/css"> #demo img{ width: 90px; height: 90px; border: 5px solid #f4f4f4; } #enlarge_img{ position: absolute; display: none; z-index: 999; border: 5px solid #f4f4f4; } </style></head><body> <div id="demo"> <img src="images/01.jpg" /> <img src="images/02.jpg" /> <img src="images/03.jpg" /> </div> <div id="enlarge_img"></div></body> <script type="text/javascript"> var demo=document.getElementById("demo"); var gg=demo.getElementsByTagName("img"); var ei=document.getElementById("enlarge_img"); for(i=0;i<gg.length;i++){ var ts=gg[i]; ts.onmousemove=function(event){ event=event||window.event; ei.style.display="block"; ei.innerHTML='<img src="'+this.src+'" />'; ei.style.top=document.body.scrollTop+event.clientY+10+"px"; ei.style.left=document.body.scrollLeft+event.clientX+10+"px"; } ts.onmouSEOut=function(){ ei.innerHTML=""; ei.style.display="none"; } ts.onclick=function(){ window.open(this.src); } } </script></html>這個一般用于網頁上的圖片查看圖片細節
圖片輪顯效果<!DOCTYPE html><meta charset="utf-8"><html><head> <title>制作簡單的圖片輪顯效果</title> <script> var n=1; function changePic(m){ return n=m; } function change(){ var myImg=document.getElementById("s1") myImg.src="images/0"+n+".jpg"; if(n<5)n++; else n=1; } </script></head><body onload="setInterval(change,2000);"><img src="images/01.jpg" width="200" id="s1" /><div> <a href="#" onclick="changePic(1)">第一幅圖</a> <a href="#" onclick="changePic(2)">第二幅圖</a> <a href="#" onclick="changePic(3)">第三幅圖</a> <a href="#" onclick="changePic(4)">第四幅圖</a> <a href="#" onclick="changePic(5)">第五幅圖</a></div></body></html>
新聞熱點
疑難解答
