js实现详情页放大镜效果


Posted in Javascript onOctober 28, 2020

本文实例为大家分享了js实现详情页放大镜的具体代码,供大家参考,具体内容如下

1.html

<div id="small">
    <div id="mo">  
    </div>
    <img src="img/timg.jpg"/>
    <div id = "frame">  
    </div>  
  </div>
  <div id = "big">
    <img src="img/timg.jpg"/>
</div>

2.css

<style>
      *{
        margin:0;padding:0;
      }
      #small{
        width:400px;
        height:400px;
        position:relative;
        box-shadow: 0 0 5px #000;
      }
      #small img{
        /* 图片百分百,完全覆盖原始框 */
        width:100%;
        height:100%;
      }
      #frame{
        width:100px;
        height:100px;
        position:absolute;
        box-shadow:0 0 5px #000;
        top:0;
        left:0;
        /* 在鼠标移入原始框的时候才显现,所以初始值为隐藏 */
        display: none;
        /* 在放大镜中插入背景图,根据背景图定位,改变放大镜中和原始框中的图片一一对应 */
        /* 0 0 即为background-position的值 */
        background: url(img/timg.jpg) no-repeat 0 0;
        /* CSS2中的内容要和CSS3中的分开 */
        background-size: 400px 400px ;
      }
      #big{
        width:400px;
        height:400px;
        position:relative;
        box-shadow: 0 0 5px #000;
        /* 因为放大框中的内容
        与放大镜是16:1放大的,
        所以原始框与放大框相同大小的情况下
        使用overflow: hidden;用放大框截取插入图片的大小 */
        overflow: hidden;
        /* 在鼠标移入原始框的时候才显现,所以初始值为隐藏 */
        display: none;
      }
      #big img{
        width:1600px;
        height:1600px;
        position: absolute;
        left: 0;
        top:0;
      }
      
      #big,#small{
        margin-left: 100px;
        float: left;
      }
      #mo{
        /* 最上边的一层膜宽高100%,层级在最上层,完全覆盖住原始框,
        确保鼠标在原始框上移动时,放大镜能跟着稳定的移动,
        即鼠标移动的参照物唯一 */
        width:100%;
        height:100%;
        z-index: 999;
        position: absolute;
      }
</style>

3.js

<script>
  //获取原始框
  var oSmall = document.getElementById("small");
  //获取放大框
  var oBig = document.getElementById("big");
  //获取放大镜
  var oFrame = document.getElementById("frame");
  //获取放大框中的图片
  var oBig_img = oBig.children[0]
  //获取原始框中的图片
  var oSmall_img = oSmall.children[1];
  //鼠标移入事件(注:没有兼容问题)
  //放大镜和放大框显现出来
  oSmall.onmouseenter = function(){
    oBig.style.display = "block";
    oFrame.style.display = "block";
    //鼠标移入图片变模糊
    oSmall_img.style.opacity = "0.3";
  }
  //鼠标移出事件(注:没有兼容问题)
  //放大镜和放大框变回原始的隐藏状态
  oSmall.onmouseleave = function(){
    oBig.style.display = "none";
    oFrame.style.display = "none";  
    //鼠标移出,图片变清晰
    oSmall_img.style.opacity = "1"
  }
  //鼠标移动事件(注:有兼容问题)
  oSmall.onmousemove = function(event){
    //解决兼容问题
    var e = event || window.event;
    //获取鼠标在放大镜中心的位置坐标(用于判断放大镜不会移出原始框)
    //获取位置用offsetX/offsetY
    //size初始值为100,与放大镜未放大之前一致,
    //size/2是为了获取鼠标在放大镜的中心点
    //用size而不是定值,是为了后边放大镜随鼠标滚轮滚动放大缩小时
    //鼠标能一直在放大镜中心位置
    //e.offsetY/e.offsetX是鼠标到原始框边框的距离
    //size / 2是鼠标到放大镜边框的距离
    //nTop/nLeft是放大镜边框到原始框边框的距离
   var nTop = e.offsetY - size / 2;
    var nLeft = e.offsetX - size / 2;
    //判断放大镜的临界值
    //不小于最小值,不大于最大值
    //判断放大镜的最小值
    if(nTop <= 0){
      //差一点就等于零的时候,也赋值为零
      nTop = 0;
    }
    if(nLeft <= 0){
      nLeft = 0;
    }  
    //判断放大镜的最大值
    //因为坐标只有offsetLeft 和 offsetTop两个,所以计算最大值时:
    //需要获取放大镜的左和上的边框到原始框的左和上的边框的最大距离与原始框的坐标位置进行比较
    //offsetHeight/offsetWidth获取元素的宽高
    //原始框的宽高 - 放大框的宽高 == 放大镜可以移动的最大值
    var maxTop = oSmall.offsetHeight - oFrame.offsetHeight;
    var maxLeft = oSmall.offsetWidth - oFrame.offsetWidth;
    //放大镜的边框大于等于最大值,停
    if(nTop >= maxTop){
      nTop = maxTop;
    }
    if(nLeft >= maxLeft){
      nLeft = maxLeft;
    }  
    //放大镜的位置坐标
    oFrame.style.top = nTop + "px" 
    oFrame.style.left = nLeft + "px"
    //计算放大镜和放大框之间的缩放比例
    //计算比例用offsetWidth/offsetHeight
    var propX = oBig.offsetWidth/oFrame.offsetWidth;
    var propY = oBig.offsetHeight/oFrame.offsetHeight;
    //-nTop/-nLeft用负值,使放大框中的内容与放大镜所停的位置一致(图片内容移动方向相同)
    //如果是正值,放大镜移动时与放大框中的内容相反移动(放大框中不会出现对应的放大图片)
    oBig_img.style.top = -nTop*propY + "px"
    oBig_img.style.left = -nLeft*propX + "px"
    //鼠标移入时,放大镜清晰,原始框模糊
    //利用改变插入到放大镜中的背景图的position,进行图片的一一对应
    //注意:``里的${}和${}中间用空格隔开
    oFrame.style.backgroundPosition = `${-nLeft}px ${-nTop}px`;
  }
    //鼠标滚轮事件
    //注意:兼容问题
    //设置size初始值为100,即放大镜未放大缩小时的原始状态
    //通过判断滚轮的上下滚动方向,改变放大镜的大小,即宽高同时增大或缩小
    var size = 100;
     //解决兼容问题
     //FF(火狐)
    if(document.addEventListener){
       //第一个参数是事件名称,
       //第二个参数是事件处理函数,
       //第三个参数是一个被废弃的参数,是以事件捕获的形式,还是事件冒泡的形式触发事件,默认false
       //第三个参数基本用不到
        document.addEventListener('DOMMouseScroll',handleEvent,false);
    }
     //IE/Opera(欧鹏)/Chrome(谷歌)
    window.onmousewheel = document.onmousewheel = handleEvent;
     // 分辨滚轮向上还是向下;
    function handleEvent(event){
        var e = event || window.event;
        // FF => detail 向上 是 负数 ;
        //           向下 是 正数;
        // Chrome => deltaY  向上 是 负数;
        //                 向下 是 正数;
        var flag = true
        if(e.detail != 0 ){
          // 说明浏览器是火狐;
            if(e.detail > 0){
                flag = false// 向下;
            }else{
                flag = true;// 向上;
            }
        }else{
          //说明浏览器是IE/Opera/Chrome
            if(e.deltaY > 0){
                flag = false// 向下;
            }else{
                flag = true;// 向上;
            }
        }
        //滚轮向上时,放大镜变大,放大框中的内容缩小;
        //滚轮向下时,放大镜缩小,放大框中的内容变大;
        if(flag){
           // 向上
            size ++;
        }else{
            size --;// 向下
        }
        //将size值赋给放大镜
        oFrame.style.width = size + "px";
        oFrame.style.height = size + "px";
        //当鼠标放在原始框上一动不动时,放大镜也不会再增大了
        oSmall.onmousemove(e);
        //放大缩小后放大镜和放大框的比例发生了变化,导致放大框中的内容与放大镜所在位置不符
        // 根据放大镜的缩放,重新计算放大框与放大镜之间的缩放比例
        var prop = 400 / size;
        // 根据比例缩放放大框中的图片 ;
        oBig_img.style.width = 400 * prop + "px";
        oBig_img.style.height = 400 * prop + "px";
    }
</script>

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

Javascript 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
JavaScript 数组详解
Oct 10 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
用js实现放大镜效果
Oct 28 #Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 #Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 #Javascript
原生JS生成指定位数的验证码
Oct 28 #Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 #Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 #Javascript
通过JS判断网页是否为手机打开
Oct 28 #Javascript
You might like
NO3第三帝国留言簿制作过程
2006/10/09 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php实现多城市切换特效
2015/08/09 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
javascript 精粹笔记
2010/05/09 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python简单区块链模拟详解
2019/07/03 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
开国大典观后感
2015/06/04 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
为Java项目添加Redis缓存的方法
2021/05/18 Redis
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript