首页 > 代码库 > 放大镜代码及效果图

放大镜代码及效果图

2024-09-23 18:00:11   216人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>放大镜</title>
        <script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src=http://www.mamicode.com/"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=http://www.mamicode.com/"IMG/fdj1-2.jpg" id="demo" style="position: relative;float: left;">
            <img src=http://www.mamicode.com/"IMG/fdj1-2.jpg" width="240" height="180">
            <img src=http://www.mamicode.com/"IMG/fdj1-2.jpg" width="960" height="720" style="display: none;">
        </a> 
    </body>
</html>

技术分享

放大镜代码及效果图


联系
我们