html5图片放大展示

最新推荐文章于 2024-08-05 15:57:37 发布

zhengx辉

最新推荐文章于 2024-08-05 15:57:37 发布

阅读量6.2k

点赞数

分类专栏： JS 文章标签： html5 js

本文链接：https://blog.csdn.net/yiye2017zhangmu/article/details/84135639

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一.html编写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>商品放大效果</title>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div id="box">
			<!--默认商品小图-->
			<div class="posi">
				<!--小图部分-->
				<img  src="img/TB2400x400.jpg" />
				<!--span挡板部分-->
				<span class="move"></span>
				
			</div>
			<!--商品大图的部分-->
			<div class="bigimg">
				<img id="bimg" src="img/TB2.jpg" />
				
			</div>
			
		</div>
		
	</body>
	<!--导入-->
	<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	<!--可以支持编写js代码的环境-->
	<script type="text/javascript" >
		$(function(){
			//1.获取小图片容器
			var $gs = $("#box .posi"); //div class= "posi"
			//2.获取挡板容器
			var $gsmove = $("#box span");
			//3.获取存放大照片容器
			var $gsImg = $("#box .bigimg");
			
			//4.给小图片容器获取鼠标浮动的触发事件
			$gs.hover(function(){
				//把挡板显示出来，把存放大照片的容器显示出来
				//让挡板渐入 10毫秒
				$gsmove.fadeIn(10);
				$gsImg.fadeIn(10);
				
			},function(){//当鼠标不在悬浮范围内后执行。
				$gsmove.fadeOut(10);
				$gsImg.fadeOut(10);
			});
			//5.获取鼠标移动的坐标 - 控制挡板的移动
			$gs.mousemove(function(e){
				console.log("鼠标的坐标为:("+e.clientX+","+e.clientY+")");
				//获取鼠标的坐标参数
				var cx =e.clientX;
				var cy =e.clientY;
				//获取小图容器的坐标
				//offset:当前元素针对于相对浏览器body的位置
				var gl = $gs.offset().left;//获取X坐标
				var gt = $gs.offset().top;//获取到Y坐标
				console.log("小容器的坐标为:("+gl+","+gt+")")
				//挡板相对要移动的位置
				//cx - gl >=0  ;X轴方向要移动的距离
				//cy - gt >=0  ;Y移动轴方向要距离
				//获取挡板的宽高的一半
				var mw = $gsmove.width()/2;
				var mh = $gsmove.height()/2;
				//做判断,挡板的移动距离不能未赋值
				var mleft = cx-gl-mw;
				var mtop = cy-gt-mh;
				//小容器的宽高
				var gsw = $gs.width();
				var gsh = $gs.height();
				
				if(mleft<=0){
					mleft = 0;
				}else if(mleft>=gsw-mw*2){
					mleft = gsw - mw*2;
				}
				if(mtop<=0){
					mtop = 0;
				}else if(mtop>=gsh - mh*2){
					mtop = gsh-mh*2
				}			
				//挡板要移动的位置
				$gsmove.css({"left":mleft,"top":mtop});
				//根据移动的比例控制大图的移动比例 ;0<=2<=10 = 2/10
				var l_b = mleft/(gsw-mw*2);
				var t_b = mtop/(gsh-mh*2);
				//大图要移动的距离
				var b_left = l_b*($("#box .bigimg img").width() - $gsImg.width());
				var b_top = t_b*($("#box .bigimg img").height() - $gsImg.height());
				console.log("大图要移动的距离:"+b_left+","+b_top)
				$("#bimg").css({"left":-b_left,"top":-b_top});
				
//				$("#box .bigimg img").css({"left":-b_left,"top":-b_top});
	
				
				
				
			});
			
			
		});
		
	</script>
</html>

二.样式


*{
	margin: 0px;
	padding: 0px;
}

#box{
	width: 400px;
	height: 400px;
	background: aquamarine;
	margin-top: 100px;
	margin-left: 200px;
	position: relative;
}
.posi{
	width: 266px;
	height: 400px;
	margin: 0px auto;
	position: relative;
}
.posi span{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 133px;
	height: 133px;
	display: none;
	background:url(../img/Tb2.png);
}
.bigimg{
	width: 400px;
	height: 400px;
	background: #7FFFD4;
	/*超出容器的部分隐藏*/
	overflow: hidden;
	position: absolute;
	left: 400px;
	top: 0px;
	display: none;
}
#bimg{
	position: absolute;
}

三.效果展示