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 相关文章推荐
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
用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开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
koa源码中promise的解读
2018/11/13 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python绘制直线的方法
2018/06/30 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python绘制漏斗图步骤详解
2019/03/04 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
如何在django中运行scrapy框架
2020/04/22 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
小学语文教学随笔
2015/08/14 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js