js放大镜放大图片效果

369 阅读 0 评论 244 点赞

我是靠谱客的博主烂漫水池，这篇文章主要介绍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>

</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="//file2.kaopuke.com:8081/files_image/201804/20080504192147592.jpg" alt=""></span> 
        <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192148526.jpg" alt=""></span> 
        <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192151907.jpg" alt=""></span> 
        <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192153429.jpg" alt=""></span> 
        <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192154128.jpg" alt=""></span> 
        <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192154190.jpg" alt=""></span> 
        <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192154345.jpg" alt=""></span> 
        <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192155839.jpg" alt=""></span> 
        <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192156858.jpg" alt=""></span> 
        <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192156118.jpg" alt=""></span> 
        <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192157749.jpg" alt=""></span> 
        <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192158181.jpg" alt=""></span> 
        <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192158115.jpg" alt=""></span> 
        <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192159820.jpg" alt=""></span> 
        <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/20080504192201596.jpg" alt=""></span> 
        <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="//file2.kaopuke.com:8081/files_image/201804/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>

</body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]