使用jQuery实现图片放大效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32077521/article/details/100178448

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="JQuery/JQzoom/js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="JQuery/JQzoom/js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
    <link href="JQuery/JQzoom/css/jqzoom.css" rel="stylesheet" />
</head>
<body>
    <style type="text/css">
        #a1 {
        margin-left:700px;
        }
    </style>
    <!-- 一个a标签内含一个img标签 -->
    <a href="images/JQzoom.jpg" title="这是一张图片" id="a1">
        <img src="images/JQzoom-1.jpg" title="这是一张图片" />
    </a>
    <script type="text/javascript">
        $(function () {
            //选中a标签直接调用jqzoom()方法即可
            //$("#a1").jqzoom();
            $("#a1").jqzoom({
                zoomWidth: 300, //放大图的宽度(默认是 200)
                zoomHeight: 250, //放大图的高度(默认是 200)
                offset: 10, //离原图的距离(默认是 10)
                position: "left", //放大图的定位(默认是 "right")
                preload: 1
            }
                );
        });
    </script>
</body>
</html>

JQzoom插件使用