js实现购物网站放大镜功能

作者:404BAI 时间:2024-04-30 08:51:56 

本文实例为大家分享了js实现购物网站放大镜功能的具体代码,供大家参考,具体内容如下

首先看效果图:

js实现购物网站放大镜功能

先是布局,左边一个小图框,包含一个鼠标移动框,右边一个放大框。


<div class="box">
       <div class="small">
           <img src="small3.jpg" alt="">
           <div class="move"></div>
       </div>
       <div class="big">
           <img src="big3.jpg" alt="">
       </div>
</div>

写一下css


.small{
   position: relative;
   float: left;
   width: 450px;
   height: 450px;
   border:1px solid #000;
}
.small .move{
   position: absolute;
   top:0;
   width: 300px;
   height: 300px;
   background-color: rgba(0,0,0,0.4);
   cursor:move;
   display: none;
}
.big{
   position: relative;
   float: left;
   width: 540px;
   height: 540px;
   margin-left: 20px;
   overflow: hidden;
   border:1px solid #000;
   display: none;
}
.big img{
   position: absolute;
   top:0;
   left: 0;
}

js部分:


var box=document.getElementsByClassName('box')[0],small=box.getElementsByClassName('small')[0],move=small.getElementsByClassName('move')[0],smallImg=small.getElementsByTagName('img')[0],big=box.getElementsByClassName('big')[0],bigImg=big.getElementsByTagName('img')[0];
   //首先把需要的元素都获取出来
   small.onmouseover=function(){
       move.style.display='block';
       big.style.display="block";
   };
   small.onmouseout=function(){
       move.style.display='none';
       big.style.display="none";
   };
   small.onmousemove=function(e){
       e=e||window.event;//兼容性考虑
       var x=e.clientX-smallImg.getBoundingClientRect().left-move.offsetWidth/2;
       var y=e.clientY-smallImg.getBoundingClientRect().top-move.offsetHeight/2;
       if(x<0){
           x=0;
       }
       if(x>smallImg.offsetWidth-move.offsetWidth){
           x=smallImg.offsetWidth-move.offsetWidth;
       }
       if(y<0){
           y=0;
       }
       if(y>smallImg.offsetHeight-move.offsetHeight){
           y=smallImg.offsetHeight-move.offsetHeight;
       }
       move.style.left=x+"px";
       move.style.top=y+"px";
       //实现左边move块跟随鼠标移动的代码
       var scale=bigImg.offsetWidth/smallImg.offsetWidth;
       //按照比例放大
       bigImg.style.left='-'+x*scale+'px';
       //因为图片是需要左移和上移的所以要加负号
       bigImg.style.top='-'+y*scale+'px';
   }

放大镜效果就实现啦!

js实现购物网站放大镜功能

来源:https://blog.csdn.net/weixin_43738731/article/details/86323015

标签:js,放大镜
0
投稿

猜你喜欢

  • python中二维阵列的变换实例

    2021-06-28 07:54:06
  • javascript中的throttle和debounce浅析

    2024-05-08 10:10:27
  • 线程安全及Python中的GIL原理分析

    2022-09-06 11:16:20
  • python实现线程池的方法

    2023-03-10 14:08:06
  • ASP使用连接MYSQL数据库全攻略

    2007-09-23 09:06:00
  • Oracle SecureFile的功能第1/4页

    2009-06-19 18:07:00
  • python模块导入方式浅析步骤

    2023-05-13 01:08:13
  • PyInstaller运行原理及常用操作详解

    2022-09-15 03:57:26
  • keras小技巧——获取某一个网络层的输出方式

    2023-08-20 12:56:47
  • Python3+Selenium+Chrome实现自动填写WPS表单

    2023-12-08 05:47:59
  • 用Dreamweaver MX制作文字特效

    2011-06-14 09:49:47
  • pandas中按行或列的值对数据排序的实现

    2023-09-23 02:32:18
  • mysql 5.7.13 安装配置方法图文教程(win10)

    2024-01-14 06:51:48
  • Python中pandas模块DataFrame创建方法示例

    2022-07-19 03:06:09
  • Python计算矩阵的和积的实例详解

    2021-06-06 10:09:34
  • JS合并数组的几种方法及优劣比较

    2024-06-05 10:02:00
  • python单线程实现多个定时器示例

    2023-05-11 08:59:18
  • Python实现操作Redis的高级用法分享

    2022-07-29 04:26:29
  • javascript验证上传文件的类型限制必须为某些格式

    2024-04-18 09:36:34
  • tensorflow查看ckpt各节点名称实例

    2021-03-26 14:04:49
  • asp之家 网络编程 m.aspxhome.com