实现图片缩略图

最新推荐文章于 2021-12-12 15:50:30 发布

原创最新推荐文章于 2021-12-12 15:50:30 发布 · 748 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

练习专栏收录该内容

36 篇文章

订阅专栏

鼠标移入图片放大
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实现图片缩略图</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{padding: 20px; margin: 0;}
			li{list-style: none; float: left; margin-right: 10px; border: 1px solid #aaa;}
			/*img{width: 160px;}*/
			a{cursor: default;}
			#tip{position:  absolute; border: 1px solid #CCCCCC; background-color: #333;display: none;}
		</style>
		<script type="text/javascript">
			$(function(){
				var y=20
				var x=10
				$("ul li a").mouseover(function(e){
					var tip="<div id='tip'><img src='"+$(this).children("img").attr("src")+"'/></div>"
					$("body").append(tip)
					console.log(e.pageX)
					//获取鼠标所在的位置e.pageY()获得鼠标所在的y轴的位置  e.pageX获取鼠标所在的x轴的位置
					$("#tip").css({
						"top":(e.pageY+y)+"px",
						"left":(e.pageX+x)+"px"
						
						
					}).show()
				}).mouseout(function(){
					$("#tip").remove()
				}).mousemove(function(e){
					$("#tip").css({
						"top":(e.pageY+y)+"px",
						"left":(e.pageX+x)+"px"
					})
				})//鼠标指针移动时触发的事件
			})
		</script>
	</head>
	<body>
		<p>图片放大效果：</p>
		<ul>
			<li><a href="#"><img src="img/1.png" width="160px"/></a></li>
			<li><a href="#"><img src="img/2.png" width="160px"/></a></li>
			<li><a href="#"><img src="img/3.png" width="160px"/></a></li>
			<li><a href="#"><img src="img/4.png" width="160px"/></a></li>
			
		</ul>
		
	</body>
</html>