HTML实现鼠标移动放大大图

最新推荐文章于 2021-06-09 18:13:41 发布

原创最新推荐文章于 2021-06-09 18:13:41 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

Html.Jquery 专栏收录该内容

3 篇文章

订阅专栏

这段代码展示了如何使用JavaScript实现鼠标悬停时的图片预览功能。通过创建动态div并设置其位置，当鼠标移动时，图片会跟随鼠标位置进行预览。此功能常见于网页中提供大图预览的小图链接上。

$(function(){
			var x = 10;
			var y = 20;
			$("a.tooltip").mouseover(function (e) {
			    //创建一个div将大图放入
			    var tooltip = "<div id='tooltip'><img width='300px' src='" + this.href + "' alt='产品预览图'/></div>"; //创建 div 元素
			    
			    $("body").append(tooltip);
			    //设置div的位置
			    $("#tooltip")
			        .css({
			            "top": (e.pageY + y) + "px",
			            "left": (e.pageX + x) + "px"
			        }).show("fast");
			}).mouseout(function () {
			    $("#tooltip").remove();
			}).mousemove(function (e) {
			    $("#tooltip")
			        .css({
			            "top": (e.pageY + y) + "px",
			            "left": (e.pageX + x) + "px"
			        });
			});
		})