在学习一些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>
新闻热点
疑难解答
