放大镜代码及效果图 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>放大镜</title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jQuery.enlarge.min.js"></script>
        <style>

            img{
                border:none;
                float: left;
            }
            #demo{
                margin: 100px auto;
            }
        </style>
    </head>
    <body>
        
        <script> 
        $(function(){ 
            $("#demo").enlarge({ 
         
        // 鼠标遮罩层样式
                shadecolor: "#FFD24D",
                shadeborder: "#FF8000",
                shadeopacity: 0.4,
                cursor: "move",

        // 大图外层样式
                layerwidth: 480,
                layerheight: 360,
                layerborder: "#DDD",
                fade: true,

        // 大图尺寸
                largewidth: 960,
                largeheight: 720
            }); 
        });

        
        </script> 
        
        <a href="IMG/fdj1-2.jpg" id="demo" style="position: relative;float: left;">
            <img src="IMG/fdj1-2.jpg" width="240" height="180">
            <img src="IMG/fdj1-2.jpg" width="960" height="720" style="display: none;">
        </a> 
    </body>
</html>

posted @ 2017-05-20 17:37  曦言鸢默  阅读(350)  评论(0)    收藏  举报