jquery移入链接提示功能

最新推荐文章于 2023-02-21 11:48:01 发布

武凌渡情劫

最新推荐文章于 2023-02-21 11:48:01 发布

阅读量132

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_35146837/article/details/128743202

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

jquery的移入链接提示功能主要实现的是当鼠标移入图片时，右下角会出现一张放大的图片，并且图片会跟随鼠标箭头的移动而移动，具体我们来看一下代码的实现功能：

<style>
*{margin:0;padding:0;}
#box{width:1000px;height:400px;}
ul{list-style-type:none;}
ul li{float:left;margin:0 10 0 10;}
ul li img{width:200px;height:200px;}
</style>
<body>
	<div id="box">
		<ul>
			<li><img src="image/0.jpeg"/></li>
			<li><img src="image/1.jpeg"/></li>
			<li><img src="image/2.jpeg"/></li>
			<li><img src="image/3.jpeg"/></li>
		</ul>
	</div>
</body>
<script>
	$(function(){
		$("ul li img").hover(function(e){
			var src=$(this).attr("src");
			$("body").append("<div id='box'><img src='"+src+"'/></div>");
			$("#box").css({position:"absolute",left:"e.pageX+10",top:"e.pageY+10"});
	},function(){
		$("#box").remove();
	})
})
$("ul li img").mousemove(function(){
	$("#box").css({position:"absolute",left:"e.pageX+10",top:"e.pageY+10"});
})
</script>