js仿京东放大镜效果


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了js仿京东放大镜效果的具体代码,供大家参考,具体内容如下

1、效果1:鼠标经过前

js仿京东放大镜效果

2、效果2:鼠标放上去,弹出右边放大镜

js仿京东放大镜效果

3、效果3:鼠标在小盒子移动,放大镜跟着移动

js仿京东放大镜效果

4、源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    *{
      margin: 0;
      padding: 0;
    }

    /* 左边小盒子样式 */
    .box1{
      position: relative;
      width: 450px;
      height: 450px;
      border: 1px solid #999;
      margin-left: 80px;
      margin-top: 50px;
    }
    .box1 .img1{
      /* 设置左边图片大小 */
      width: 450px;
    }

    /* 遮罩层bg的样式 */
    .box1_bg{
       /* 一开始要隐藏起来 */
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 300px;
      background-color: yellow;
      /* 透明效果 */
      opacity: .5 ;
      cursor: move;
    }


    /* 右边大盒子样式 */
    .big_img{
      /* 一开始要隐藏起来 */
      display: none;
      width: 540px;
      height: 540px;
      position: absolute;
      top: 0;
      left: 470px;
      border: 1px solid #999;
      overflow: hidden;
    }
    /* 大盒子里面的图片样式 */
    .big_img .big_imgs{
      position: absolute;
      top: 0;
      left: 0;
      width: 800px;
    }
  </style>
</head>
<body>
  <div class="box1">
    <img class="img1" src="images/2-1.jpg" alt="#" >
    <div class="box1_bg"></div>
    <div class="big_img">
      <img class="big_imgs" src="images/2.jpg" alt="#" >
    </div>
  </div>
  <!-- JS代码如下 -->
  <script>
    // ①整个案例可以分为三个功能模块
    // ②鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开-->隐藏2个盒子功能
    // ③黄色的遮挡层 跟随 鼠标功能。
    // ④移动黄色遮挡层,大图片跟随移动功能。
    // 事件源:
    var box1 = document.querySelector('.box1');
    var bg = document.querySelector('.box1_bg');
    var big = document.querySelector('.big_img');
    // 1. 鼠标 经过 盒子的时候,显示 遮罩层 和 放大镜
    box1.addEventListener('mouseover',function(){
      bg.style.display = 'block';
      big.style.display = 'block';
    })
     // 2. 鼠标 离开 盒子的时候,隐藏 遮罩层 和 放大镜
    box1.addEventListener('mouseout',function(){
      bg.style.display = 'none';
      big.style.display = 'none';
    })

    // 2.鼠标移动的时候
    box1.addEventListener('mousemove',function(e){
      var x = e.pageX - this.offsetLeft; // x是鼠标到父盒子x距离
      var y = e.pageY - this.offsetTop; // y是鼠标到父盒子y距离
      // console.log(x ,y)
      // 最大移动距离,box1盒子的大小 减去 遮罩层的盒子大小  
      var max_x = box1.offsetWidth - bg.offsetWidth;
      var max_y = box1.offsetHeight - bg.offsetHeight;
      if( max_x >=0 )
      // *将坐标减去 遮罩层盒子的一半 鼠标就落到遮罩层的中间
      // 移动距离X,Y
      var X = x - bg.offsetWidth/2;
      var Y = y - bg.offsetHeight/2;
      // *当遮罩层超出 box1 的边框的时候,设一个边界卡住它
      if(X <= 0 ){
        X = 0
      }else if( X >= max_x){
        X = max_x;
      }
      if(Y <= 0 ){
        Y=0
      }else if( Y >= max_y){
        Y = max_y;
      }
      // *把鼠标在盒子内的坐标给 遮罩层 实现跟随鼠标移动效果
      // 注意加上 px 不然不起效果
      bg.style.left = X +'px';
      bg.style.top = Y +'px';
      
      // 右边图片跟随移动,有一个小算法:big_img_x
      // 遮挡层移动距离(X)/遮挡层最大移动距离(max_x)=大图片移动距离(bigX)/大图片移动的最大距离(big_img_x)

      // 获取 图片 事件源
      var big_img = document.querySelector('.big_imgs');
      // big_img_x 求大图片移动的最大距离 正方形 距离一样的
      var big_img_x = big_img.offsetWidth - big.offsetWidth ; 
      var big_img_y = big_img.offsetWidth - big.offsetWidth ;
      // bigX 大图片的移动距离
      var bigX = X * big_img_x / max_x ; 
      var bigY = Y * big_img_y / max_x ; 
      big_img.style.left = -bigX +'px';
      big_img.style.top = -bigY +'px';
    })
  </script>
</body>
</html>

5、喜欢的话记得点赞 收藏 关注噢~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 #Javascript
js实现带有动画的返回顶部
Aug 09 #Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 #Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 #Javascript
vue 子组件watch监听不到prop的解决
Aug 09 #Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 #Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 #Javascript
You might like
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
Python字符遍历的艺术
2008/09/06 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
vscode调试django项目的方法
2020/08/06 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
大学生学业生涯规划
2014/01/05 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2015年财政所工作总结
2015/04/25 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
单位考核鉴定意见
2015/06/05 职场文书
小型婚礼主持词
2015/06/30 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android