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

来源：互联网发布：json测试数据编辑：程序博客网时间：2024/06/05 16:53

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>

阅读全文

0 0