`

仿淘宝放大镜效果

 
阅读更多

 

/*
*知识点预备
clientX,clientY    鼠标相对于可视区的位置

offsetX,offsetY  layerX layerY   鼠标相对于事件源的位置

screenX，screenY  鼠标相对于屏幕的位置

pageX , pageY   IE(不支持)鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。
在有滚动条的情况下就需要做这种额外的处理
兼容性的处理如下
var docE = document.documentElement,docBody=document.body;
pageX = clientX + Math.max(docE .scrollLeft,docBody.scrollLeft);
pageY = clientY  + Math.max(docE .scrollTop,docBody.scrollTop);**/


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>放大镜</title>
	<link rel="stylesheet" href="">
	<style type="text/css">
     media="all"
		html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
		margin: 0;
		padding: 0;
		}
		#small{
			border: 1px solid  #dddddd;
			width: 352px;
			height: 352px;
			position: absolute;
			top: 0px;
			left: 0px;
		}
       #small img{
       	   width: 350px;
       	   height: 350px;
       }
       .zoomUp{
       	visibility:hidden;
       	cursor: move;
       	border: 1px solid #ddd;
       	background: #FEDE4F 50% top no-repeat;
		opacity: .5;
		-moz-opacity: .5;
		-khtml-opacity: .5;
		filter: alpha(Opacity=50);
		position: absolute;
		left: 0;
		top:0;
       }
       #big{
       	width: 402px;
       	height: 402px;
       	position: absolute;
       	left: 362px;
       	top: 0px;
       	border: 1px solid #dddddd;
       	overflow: hidden;
       	visibility: hidden;
       }
       #big img{
       	width: 800px;
       	height: 800px;
       	position: absolute;

       }
	</style>
	<script type="text/javascript">
        window.onload = function(){
             var small = document.getElementById("small");
          
             var big  = document.getElementById("big");
             var bigImg = big.getElementsByTagName("img")[0];
          
             small.onmouseover = function(e){
                    var e = e || window.event;
 				   big.style.visibility = "visible";
                   small.onmousemove = function(e){
                      var e = e || window.event;
                      //事件源位置
                      var ex = e.offsetX || e.layerX;
                      var ey = e.offsetY || e.layerY;
                   
                      bigImg.style.left = -ex/small.offsetWidth*(big.offsetWidth)+"px";
                      bigImg.style.top = -ey/small.offsetHeight*(big.offsetHeight)+"px";
              
                   }

                   small.onmouseout = function(e){
                   	console.log("out");
                   	big.style.visibility = "hidden";
					small.onmousemove =  small.onmouseout = null;
					 
                   }

                   return false;

             }







        }



	</script>
</head>
<body>
	<div id="small">
		<img src="img/small.jpg" />		
	</div>
	<div id="big">
		     <img src="img/big.jpg">
	</div>

	
</body>
</html>

 

分享到：
| js--简单放大镜实现（带移动方块）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics