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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue如何截取字符串
May 06 Javascript
js实现录音上传功能
Nov 22 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
php短址转换实现方法
2015/02/25 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
python正则表达式match和search用法实例
2015/03/26 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
python基于socket函数实现端口扫描
2020/05/28 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
田径运动会广播稿
2015/08/19 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
导游词之千岛湖
2019/09/23 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
MySQL批量更新不同表中的数据
2022/05/11 MySQL