商城放大镜效果

最新推荐文章于 2024-07-08 17:28:27 发布

后盾落尘

最新推荐文章于 2024-07-08 17:28:27 发布

阅读量606

点赞数

分类专栏： WEB开发 JAVASCRIPT 文章标签：博客 html jquery js 布局

本文链接：https://blog.csdn.net/u013866359/article/details/24324043

版权

WEB开发同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JAVASCRIPT

2 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			width: 900px;
			height: 500px;
			border: 1px solid #f00;
			margin: 50px auto;
		}
		.small{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			float: left;
			position: relative;
		}
		.small b{
			width: 100px;
			height: 100px;
			background: pink;
			opacity: 0.4;
			filter:alpha(opacity=40);
			position: absolute;
			left: 0px;
			top: 0px;
			display: none;
		}
		.big{
			width: 400px;
			height: 400px;
			border: 1px solid blue;
			overflow: hidden;
			float: left;
			margin-left: 20px;
			margin-top: 30px;
			position: relative;
			display: none;
		}
		.big img{
			position: absolute;
			left: 0px;
			top: 0px;
		}
	</style>
	<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
	    $(function(){
	    	$('.small').mouseover(function(e){//为小图添加鼠标移入事件
	    		 $('.small b').show();//将小方块显示
	    		 $('.big').show();//将大图显示
	    		 var L=e.pageX;//当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
	    		 var l=$(this).offset().left;//获取小图与左侧的距离
	    		 var left=L-l-50;//得到小方块与小图左侧的距离

	    		 var T=e.pageY;//当鼠标事件发生的时候，鼠标相对于事件源Y轴的位置
	    		 var t=$(this).offset().top;//获取小图与顶部的距离
	    		 var top=T-t-50;//得到小方块与小图顶部的距离

	    		 left=left > 300 ? 300 : left;//对left的值进行限制当left的值大于300时就是300
	    		 left=left < 0 ? 0 : left;//对left的值进行限制当值小于0时就是0
	    		 top=top > 300 ? 300 : top;//对top的值进行限制当值大于300时就是300
	    		 top=top < 0 ? 0 : top;//对top的值进行限制当值小于0时至为0
                  
                 var bimgl=-2*left;//大图的left值
                 var bimgt=-2*top;//大图的top值


                 bimgt=bimgt < -400 ? -400 : bimgt;//对大图的top值进行限制当值小于-400时就是-400
                 bimgl=bimgl < -400 ? -400 : bimgl;//对大图的left值进行限制当值小于-400时就是-400



                 $('.big img').css({left: bimgl, top: bimgt});//对大图添加css样式
	    		 $('b').css({left: left, top: top});//对小色块添加css样式
	    	});
	    	$('b').mouseout(function(){//对小色块添加鼠标移出事件
                  $('.big').hide();//对大图进行隐藏
                  $('b').hide();//对小色块进行隐藏
	    	});
	    })
	</script>
</head>
<body>
	<div class="box">
		<div class="small"><img src="./400.jpg" alt="" /><b></b></div>
		<div class="big"><img src="./800.jpg" alt="" /></div>
	</div>
</body>
</html>

后盾落尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商城放大镜效果

index.html Document *{ margin: 0px; padding: 0px; } .box{ width: 900px; height: 500px; border: 1px solid #f00; margin: 50px auto; } .small{ width: 400px; heig
复制链接

扫一扫