放大镜代码及效果图

最新推荐文章于 2022-08-17 20:41:50 发布

转载最新推荐文章于 2022-08-17 20:41:50 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/landen/p/6882669.html

文章标签：

#javascript #ViewUI

<!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>