jquery鼠标移动图片上实现放大效果

jquery鼠标移动图片上实现放大效果

首先界面上要有图片，下面是图片

<img id="big-circle" src="images/pic2.jpg" alt=""/>

其次在script代码段中加入如下代码，进行适量修改即可

$(document).ready(function () {
	        var x = 10;
	        var y = 20;
	        $("#big-circle").mouseover(function (e) {
	            var tooTip = "<div id='tooTip'><img src='" + this.href + "'></img><div>";
	            $("body").append(tooTip);
	            $("#tooTip").css({ position: "absolute",
	                'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
	            }).show("fast");
	        }).mouseout(function () {
	            	            $("#tooTip").remove();
	        }).mousemove(function (e) {
	            $("#tooTip").css({ position: "absolute",
	                'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
	            });
	        });

	    });