js放大镜放大图片效果

更新时间：2008年05月04日 19:22:09 作者：

非常漂亮的js放大镜效果代码，对于浏览图片效果应该不错哦

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>脚本之家 js图片放大镜</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css">     body {         background: #222;         overflow: hidden;         left: 0;         top: 0;         width: 100%;         height: 100%;         margin: 0;         padding: 0;     }     #screen span {         position:absolute;         overflow:hidden;         border:#FFF solid 1px;         background:#FFF;     }     #screen img{         position:absolute;         left:-32px;         top:-32px;         cursor: pointer;     }     #caption, #title{         color: #FFF;         font-family: georgia, 'times new roman', times, veronica, serif;         font-size: 1em;         text-align: center;     }     #caption b {         font-size: 2em;     } </style> <script type="text/javascript"> </script></head><body> <div style="position: absolute; left: 50%; top: 50%;">     <div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div>     <div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div>     <div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">         <span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192147592.jpg" alt=""></span>         <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="/upload/20080504192148526.jpg" alt=""></span>         <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192151907.jpg" alt=""></span>         <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192153429.jpg" alt=""></span>         <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192154128.jpg" alt=""></span>         <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192154190.jpg" alt=""></span>         <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192154345.jpg" alt=""></span>         <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192155839.jpg" alt=""></span>         <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192156858.jpg" alt=""></span>         <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192156118.jpg" alt=""></span>         <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192157749.jpg" alt=""></span>         <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192158181.jpg" alt=""></span>         <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192158115.jpg" alt=""></span>         <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192159820.jpg" alt=""></span>         <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192201596.jpg" alt=""></span>         <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192201700.jpg" alt=""></span>     </div>     <div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div> </div> <script type="text/javascript"> </script> </body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript实现网站顶部出现几秒后图片缓慢消失的效果
快过年了，很多网站首页都放上了新春的祝福，有些是直接换成皮肤了，而有些则是用一张很大的图片放在网站顶部，在倒数几秒后，缓慢升上去直到最后消失。
2011-01-01
js 鼠标放图片上抖动效果
闲得无聊，弄了个抖动效果，大家看看有没有值得学习地方
2012-01-01
javascript实现图片切换的幻灯片效果源代码
网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,需要的朋友可以参考下
2012-12-12
纯CSS实现的漂亮的立体图片边框效果，阴影代码
纯CSS 漂亮的立体图片边框效果，图片阴影代码，个人觉得这个挺实用，CSs实现的，定义成类，可让你整个网页上的图片都是有立体阴影的，不错吧，感谢作者分享。
2010-10-10
映彩衣的js随笔(js图片切换效果)
最近写的一个关于图片切换的js，拿出来和大家分享一下
2011-07-07
鼠标移动到一张图片时变为另一张图片
鼠标移动到一张图片时变为另一张图片...
2006-12-12
非常不错的javascript 图片慢慢下层效果
非常不错的javascript 图片慢慢下层效果...
2007-08-08
javascript 火狐(firefox)不显示本地图片问题解决
在Firefox一直不能用js做出图片预览的效果，下面这个即可解决，用替换的方法实现firefox支持得的路径格式
2008-07-07
javascript实现的一个图片转移效果
javascript实现的一个图片转移效果...
2007-06-06
摘自百度的图片轮换效果代码
摘自百度的图片轮换效果代码...
2007-11-11