js实例之放大镜效果(商城网站)

mnblue
mnblue 发布于 2017-01-09 14:45:17 浏览:309 类型:原创 - 随笔 分类:JavaScript - JavaScript 实例 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		body,ul{margin: 0; padding: 0;}
		li{list-style: none;}
		.img_box {width: 400px; height: 400px; border: 1px solid #000;position: relative;margin-bottom: 10px;}
		.img_box img {width: 400px; height: 400px;}
		.img_box .mark {display:none;width: 200px; height: 200px; background: yellow; opacity: 0.5;
		 filter: alpha(opacity=50);position: absolute; left: 0; top: 0;}
		 .img_big {width: 400px; height: 400px; position: absolute; left: 450px; top: 0px;overflow: hidden;}
		 .img_big img{width: 800px; height: 800px;position: absolute; left: 0; top:0;}
		 .img_list li{width: 50px; height: 50px; border: 2px solid #000; float: left;margin-right: 10px;}
		 .img_list li img{width: 50px; height: 50px;}
		 .img_list .active {border-color:red;}
		</style>
		<script>
			window.onload=function()
			{
				var oBox=document.getElementsByClassName('img_box')[0];
				var oMark=oBox.getElementsByClassName('mark')[0];
				var oBimg=document.getElementsByClassName('img_big')[0];
				var oImg=oBimg.getElementsByTagName('img')[0];
				oBox.onmouseenter=function(){   //onmouseenter与onmouseover一样,区别在于onmouseenter不会影响父级
					oMark.style.display='block';
				}
				
				oBox.onmousemove=function(ev){
					var ev=ev ||window.event;
					var L=ev.clientX-oBox.offsetLeft-oMark.offsetWidth/2;
					var T=ev.clientY-oBox.offsetTop-oMark.offsetHeight/2;
					if(L<0)
					{
						L=0;
					}else if(L>oBox.offsetWidth-oMark.offsetWidth)
					{
						L=oBox.offsetWidth-oMark.offsetWidth;
					}
					if(T<0)
					{
						T=0;
					}else if(T>oBox.offsetHeight-oMark.offsetHeight)
					{
						T=oBox.offsetHeight-oMark.offsetHeight;
					}
					oMark.style.left=L+'px';
					oMark.style.top=T+'px';
					var scaleX=L/(oBox.offsetWidth-oMark.offsetWidth);   
					var scaleY=T/(oBox.offsetHeight-oMark.offsetHeight);
					//得到比例
					
					var MaxX=oImg.offsetWidth-oBimg.offsetWidth;
					var MaxY=oImg.offsetHeight-oBimg.offsetHeight;
					//得到可以移动的最大值
					console.log(oImg.offsetWidth);
					oImg.style.left=-scaleX*MaxX+'px';
					oImg.style.top=-scaleY*MaxY+'px';
					
				}
				
				oBox.onmouseleave=function(){   //onmouseleave与onmouseout一样,区别在于onmouseenter不会影响父级
					oMark.style.display='none';
				}
			}
		</script>
	</head>
	<body>
		<div class="img_box">
			<img src="img/430x430.jpg" alt=""/>
			<span class="mark"></span>
		</div>
		<div class="img_big">
			   <img src="img/800x800.jpg" alt="" />
		</div>
	</body>
</html>
标签:
z
给个赞 0 人点赞
收藏 5 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
mnblue mnblue 作者

作者最新