js放大镜放大图片效果_图象特效

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <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> <div style="position: absolute; left: 50%; top: 50%;"> <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 onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE0NzU5Mi5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -8px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE0ODUyNi5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1MTkwNy5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1MzQyOS5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1NDEyOC5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1NDE5MC5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1NDM0NS5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1NTgzOS5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1Njg1OC5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1NjExOC5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1Nzc0OS5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1ODE4MS5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1ODExNS5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjE1OTgyMC5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjIwMTU5Ni5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"style="left: -11px; top: -9px;" src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA4MDUwNDE5MjIwMTcwMC5qcGc=" alt="js放大镜放大图片效果_图象特效" title="js放大镜放大图片效果_图象特效"></span> </div> <div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"> <b>carefully</b> weight the options</div> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]