淘宝图片放大效果（移动小图上的展示块会出现大的细节图）

i9xx71

于 2021-10-11 15:31:41 发布

阅读量403

点赞数 1

文章标签： javascript html html5

本文链接：https://blog.csdn.net/i9xx71/article/details/120704329

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
   <style>
      *{
        margin:0;
        padding:0;
      }
      #大边框div{
        width:850px;
        height:500px;
        border:1px solid red;
        margin:50px auto;
      }
	 
      #小图{
        width:350px;
        height:350px;
        background: url(img/small.jpg) no-repeat;
        position:relative;
        float:left;
      }
      #大图{
        width:500px;
        height:500px;
        background: url(img/big.jpg) no-repeat;
        background-position:0px 0px;
        display:none;
        float:left;
      }
      #展示块{
        width:100px;
        height:100px;
        background:rgba(255,0,0,0.5);
        position:absolute;
        top:0px;
        left:0px;
        display:none;
      }
    </style>
</head>
<body>

      <div id="大边框div">

         <div id="小图">
             <div id="展示块"></div>
         </div>

         <div id="大图"></div>

      </div>

    <script>
    /*
      
     */ 
   var 大边框div  = document.getElementById('大边框div');//
   var 展示块 = document.getElementById('展示块');//展示方块
   var 小图 = document.getElementById('小图');		//小图
   var 大图 = document.getElementById('大图');	//大图

	

   小图.onmouseover=function(){   //鼠标进入，滑块显示

       展示块.style.display='block';    
       大图.style.display='block';
       展示块.style.cursor='move';

   }
   //鼠标移出，滑块隐藏
   小图.onmouseout=function(){
       展示块.style.display='none';
       大图.style.display='none';
   }

   //鼠标点击滑块
   展示块.onmousedown = function(e){
       var e = e || event;
       var disX = e.clientX - 大边框.offsetLeft-this.offsetLeft;
       var disY = e.clientY - 大边框.offsetTop-this.offsetTop;

      //滑块移动
      document.onmousemove = function(e){
         var e = e || event;

         //获取滑块的坐标
         var oLeft = e.clientX - 大边框.offsetLeft-disX;
         var oTop = e.clientY - 大边框.offsetTop-disY;

         //判断滑块的移动范围
         
           if(oLeft<=0){
              oLeft=0
           } else if(oLeft>=250){
              oLeft=250
           }
           
          if(oTop<=0){
              oTop=0
           } else if(oTop>=250){
              oTop=250
           }	

         //为滑块赋值位移定位
         展示块.style.left= oLeft + 'px';
         展示块.style.top=  oTop + 'px';

         //获取滑块在缩略图区域移动距离的百分比
         var preLeft =  oLeft/(小图.offsetWidth	-展示框.offsetWidth);求移动的百分比
		 var preTop =  oTop/(小图.offsetHeight-展示框.offsetHeight);求百分比
         //通过百分比，实现背景图片的移动
         
         大图.style.backgroundPosition = (300*preLeft) + 'px ' + (300*preTop) + 'px';  //300指的是大图外的div-大图的宽度


      }
      
      document.onmouseup = function(){
           document.onmousemove =null;
           document.onmouseup =null; 
      }



   }



    </script>
     

   
</body>
</html>

i9xx71

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
淘宝图片放大效果（移动小图上的展示块会出现大的细节图）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #大边框div{ width:850px; height:500px;
复制链接

扫一扫