放大镜代码及效果图

Posted 曦言鸢默

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了放大镜代码及效果图相关的知识，希望对你有一定的参考价值。

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

以上是关于放大镜代码及效果图的主要内容，如果未能解决你的问题，请参考以下文章

精致动画特效及源代码

记录一下本应用《任您记）APP项目中点击底部导航栏四个按钮，则界面颜色跟着变化及图标字放大效果

js代码实现放大镜效果

原生js--实现放大镜效果

vue实战——商品放大镜组件封装及效果实现

vue实战——商品放大镜组件封装及效果实现