购物车放大镜效果(模拟jd的商品页面)

程序员文章站 2022-04-21 12:02:02
...
效果

购物车放大镜效果(模拟jd的商品页面)
代码:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.zhuti {
				width: 1262px;
				height: 840px;
			}

			.zhuti_left {
				width: 405px;
				height: 840px;
				float: left;
				position: relative;
			}

			.zhuti_right {
				width: 857px;
				height: 840px;
				float: left;
			}

			.a1 {
				width: 350px;
				height: 350px;
				border: 1px solid seagreen;
				float: left;
				margin-left: 30px;
				margin-top: 12px;
				background-image: url(img/sp1.png);
				background-size: 100%;
				position: relative;
			}
			.fdj{
				width: 230px;
				height: 240px;
				background: black;
				opacity: 0.4;
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}

			.a2 {
				width: 350px;
				height: 50px;
				/* border: 1px solid sienna; */
				float: left;
				margin-left: 30px;
				margin-top: 25px;
			}

			.a2 ul {
				display: flex;
				justify-content: space-between;

			}

			.a2 ul li {
				width: 50px;
				height: 50px;
				float: left;
			}

			.a2 ul li:nth-child(2) {

				border: 2px solid red;
			}

			.a2 ul li:nth-child(1) {
				width: 20px;
				height: 50px;
				font-weight: bold;
				font-size: 20px;
				line-height: 50px;
				color: gray;
				border: none;
			}

			.a2 ul li:nth-child(7) {
				width: 20px;
				font-weight: bold;
				color: gray;
				height: 50px;
				font-size: 20px;
				line-height: 50px;
				border: none;
			}

			.you {
				height:540px ;
				width: 540px;
				border: 1px solid red;
				position: absolute;
				left: 390px;
				top: 12px;
				overflow: hidden;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/1.png" width="1262px">
			<img src="img/2.png" width="1262px">
			<!-- <img src="img/3.png" width="1261px"> -->
			<div class="zhuti">
				<div class="zhuti_left">
					<div class="a1">
						<div class="fdj"></div>
					</div>
					<div class="you">
						<img src="img/sp1.png">
					</div>
					<div class="a2">
						<ul>
							<li>＜</li>
							<li><img src="img/sp1.png" width="50px"></li>
							<li><img src="img/sp2.png" width="50px"></li>
							<li><img src="img/sp3.png" width="50px"></li>
							<li><img src="img/sp4.png" width="50px"></li>
							<li><img src="img/sp5.png" width="50px"></li>
							<li>＞</li>
						</ul>
					</div>
				</div>
				<div class="zhuti_right">
					<img src="./img/3.png" width="857px" height="840px">
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//获取放大镜
			var ofdj=document.getElementsByClassName('fdj')[0];
			//获取you
			var you=document.getElementsByClassName("you")[0];
			//获取zhuti_left
			var zhuti_left=document.getElementsByClassName("zhuti_left")[0];
			//获取 a1
			var a1=document.getElementsByClassName("a1")[0];
			//获取 a2
			var a2=document.getElementsByClassName("a2")[0];
			for (var i = 1; i < a2.children[0].children.length-1; i++) {
				a2.children[0].children[i].onmouseover=function(){
					 for (var j = 1; j <  a2.children[0].children.length-1; j++) {
					 	a2.children[0].children[j].style.border="none";
					 }
					 this.style.border="2px solid red";
					 console.log(this.children[0].src)
					 zhuti_left.children[0].style.backgroundImage="url("+this.children[0].src+")";
					 you.children[0].src=this.children[0].src;
				 }
			}
			a1.onmousemove=function(e){
				var h=document.documentElement.scrollTop||document.body.scrollTop;
				// console.log("滚动条:"+h+"px")
				// console.log("距离a1左边距离:"+(e.clientX-30)+"px")
				// console.log("距离a1顶部边距离:"+((e.clientY-340)+h)+"px")
				var e=e||window.event;
				l=(e.clientX-30)-ofdj.offsetWidth/2;
				t=(e.clientY-342+h)-ofdj.offsetHeight/2;
				if(l<0){
				 	l=0;
				 }
				if(t<0){
					t=0;
				}
				if(l>a1.offsetWidth-ofdj.offsetWidth){
					l=a1.offsetWidth-ofdj.offsetWidth;
				}
				if(t>a1.offsetHeight-ofdj.offsetHeight){
					t=a1.offsetHeight-ofdj.offsetHeight;
				}
				ofdj.style.left=l+'px';
				ofdj.style.top=t+'px';
				you.scrollLeft=l*2.2;
				you.scrollTop=t*2.2;
			}
			a1.onmouseover=function(){
				ofdj.style.display="block";
				you.style.display="block"
			}
			a1.onmouseout=function(){
				ofdj.style.display="none"
				you.style.display="none"
			}
		</script>
	</body>
</html>