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

墨蓝 2022-06-04 03:19 819阅读 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>