js--简单放大镜实现（带移动方块）

最新推荐文章于 2022-09-21 15:35:57 发布

xie1987524

最新推荐文章于 2022-09-21 15:35:57 发布

阅读量360

点赞数 2

分类专栏： javascipt 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xie1987524/article/details/84651414

版权

javascipt 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

/*
*知识点预备
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 ,img {
		margin: 0;
		padding: 0;
		}
		#small{
			border: 1px solid  #dddddd;
			width: 352px;
			height: 352px;
			position: absolute;
			top: 0px;
			left: 0px;
      z-index: 3;
		}
       #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 zoomUp = small.getElementsByTagName("div")[0];
             var big  = document.getElementById("big");
             var bigImg = big.getElementsByTagName("img")[0];
             //类似于自定义滚动条
             // 小图中--移动方块的最大top，和最大left
           var sT = small.offsetHeight-zoomUp.offsetHeight;
           var sL = small.offsetWidth-zoomUp.offsetWidth;
           //大图的最大top和最大left
           var bT = bigImg.offsetHeight-big.offsetHeight;
           var bL = bigImg.offsetWidth-big.offsetWidth;

             small.onmouseover = function(e){
                    var e = e || window.event;
             	   //计算鼠标进入的时候的位置，定位移动块的位置                  
                   zoomUp.style.visibility = "visible";
                   big.style.visibility = "visible";
                   // zoomUp.style.top = small.offsetLeft - cx +"px";
                   // zoomUp.style.left = small.offsetTop - cy +"px";
                   

                   small.onmousemove = function(e){
                      console.log("move");
                      var e = e || window.event;
                      var ex = e.clientX;
                      var ey = e.clientY;
                      
                      //为了保证鼠标在移动块的中央，所以移动快的位置要特殊处理
                      var l = ex-small.offsetLeft-zoomUp.offsetWidth/2;
                      var t = ey-small.offsetTop-zoomUp.offsetHeight/2;
                      
                      //判断左右边位置
                      if(l<0)
                      {
                        l = 0;
                      }
                      if(l>sL){
                        l = sL;
                      }

                      //判断上下位置
                      if(t<0)
                      { 
                          t = 0;
                      }

                      if(t>sT){
                        t = sT;
                      }


                   zoomUp.style.top = t+"px";
                   zoomUp.style.left = l +"px";
                   //右边的大图片移动比例计算。是等比例的为：左边小块移动的距离/左边小块移动的最大距离  =  右边图片移动的距离/右边图片移动的最大距离

                   //已经知道的是移动的最大距离，鼠标移动的时候，可以得到左边小块移动的距离，通过等比例可以计算出右边图片的移动距离
                   var pt = t/sT;
                   var pl = l/sL;
                   
                   bigImg.style.top = -pt*bT+"px";
                   bigImg.style.left = -pl*bL+"px";


                      
                   }

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

                   }

                   return false;

             }







        }



	</script>
</head>
<body>
	<div id="small">
		<img src="img/small.jpg" />
		<div class="zoomUp" style="width: 175px; height: 175px;">&nbsp;</div>
	</div>
	<div id="big">
		     <img src="img/big.jpg">
	</div>

	
</body>
</html>

xie1987524

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js--简单放大镜实现（带移动方块）

/**知识点预备clientX,clientY 鼠标相对于可视区的位置offsetX,offsetY layerX layerY 鼠标相对于事件源的位置screenX，screenY 鼠标相对于屏幕的位置pageX , pageY IE(不支持)鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。在有滚动条的情况...
复制链接

扫一扫

专栏目录