jquery图片随鼠标移动放大(两种方式)

最新推荐文章于 2023-09-08 18:50:39 发布

孟林洁

最新推荐文章于 2023-09-08 18:50:39 发布

阅读量2.4k

点赞数 3

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/menglinjie/article/details/78700563

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 示例

        //鼠标移入
        function divIn(event) {
            var img = event.target;
            img.style.cursor = "pointer"
            var zoom = document.getElementById("zoom");
            var zoomImg = document.getElementById("f");
            zoomImg.src = img.src;
            zoom.style.display = "block";
            zoom.style.position = "absolute";
            zoom.style.top = event.clientY + 20+"px";
            zoom.style.left = event.clientX + 20+"px";
            zoom.style.zIndex = 3;
        }
        //鼠标移除
        function divOut(event) {
            var div = event.target;
            div.style.cursor = null;
            var zoom = document.getElementById("zoom");
            zoom.style.display = "none";
        }

    </script>

<img src="book.img" /> " id="img" onmouseover="divIn(event)"
onmouseout="divOut(event)" onmousemove="divIn(event)"/>
 <div id="zoom">
     <img id="f" width="340">
 </div>

2. 示例

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script language="javascript">
        $(function () {
            var offsetX = 20 - $("#imgtest").offset().left;
            var offsetY = 20 - $("#imgtest").offset().top;
            var size = 1.2 * $('#imgtest ul li img').width();
            console.log(offsetX);
            console.log(offsetY);
            console.log(size);
            $("#imgtest ul li").mouseover(function (event) {
                var $target = $(event.target);
                if ($target.is('img')) {
                    $("<img id='tip' src='" + $target.attr("src") + "'>").css({
                        "height": size,
                        "width": size,
                        "top": event.pageX + offsetX,
                        "left": event.pageY + offsetY,
                    }).appendTo($("#imgtest"));
                }
            }).mouseout(function () {
                $("#tip").remove();
            }).mousemove(function (event) {
                $("#tip").css(
                    {
                        "left": event.pageX + offsetX,
                        "top": event.pageY + offsetY
                    });
            });
        })
    </script>
    <style type="text/css">
        img {
            height: 262px;
            width: 400px;
            position: absolute;
            border: 5px solid #FFF;
            margin-top: ;
        }

        #imgtest {
            height: auto;
            width: 840px;
            margin: 0 auto;
            position: absolute;
        }

        #imgtest ul {
            position: relative;
            width: 840px;
            height: auto;
            background: #00F;
        }

        #imgtest ul li {
            position: relative;
            height: 276px;
            width: 410px;
            list-style: none;
            float: left;
            margin: 3px;
            border: 1px solid #999;
        }
    </style>
</head>
<body>
<div id="imgtest">
    <ul>
        <li><img src="images/icon_05.gif"/></li>
    </ul>
</div>
</body>
</html>