鼠标滑入显示大图

zxliyao

于 2021-01-07 14:00:40 发布

阅读量110

点赞数

本文链接：https://blog.youkuaiyun.com/zxliyao/article/details/112308261

版权

jquery

这段代码展示了如何使用JavaScript实现当鼠标悬停在链接上时，显示一个带有产品预览图的提示框。通过计算鼠标位置并动态调整提示框的位置，实现了平滑的预览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
       $(function() {
       				var x = 10,
       					y = 20;
       				$("a.tooltip").mouseover(function(e) {
       					var a = "<div id='tooltip'><img width='450px' src='" + this.href + "' alt='产品预览图'？></div>";
       					$("body").append(a);
       					$("#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"})
       				})
					
       			})
    </script>