首页 > 其他 > 详细

放大镜代码及效果图

时间:2017-05-20 18:07:55      阅读:303      评论:0      收藏:0      [点我收藏+]
<!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>

技术分享

放大镜代码及效果图

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!