js实现详情页放大镜效果

本文实例为大家分享了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>

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

(0)

相关推荐

  • JavaScript图片放大镜效果代码[代码比较简单]

    #div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op

  • 奇妙的Javascript图片放大镜

    在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一

  • JavaScript实现放大镜效果代码示例

    JavaScript实现放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&

  • js面向对象之实现淘宝放大镜

    本文实例为大家分享了js实现淘宝放大镜的具体代码,供大家参考,具体内容如下 描述: JS面向对象--淘宝放大镜实现 图片的引用是一个大图,一个小图 传输用的ajax,记得改成自己的ip地址,js和html都改一下 效果: 实现: js文件: LoadMethod.js class LoadMethod{ static get LOAD_IMG_FINISH(){ return "load_img_finish"; } static init(sourceList){ let img=n

  • js实现简单放大镜效果

    用js实现简单放大镜效果,供大家参考,具体内容如下 此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边.当鼠标移动时右边的大图片也会局部移动.这里的放大并不是真正的放大,而是等比例移动.下面是实现的代码: css样式代码如下: <style> .s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;} .s_box img{width: 400px;heig

  • JS实现放大镜效果

    JS实现放大镜效果,供大家参考,具体内容如下 鼠标移到图片上就可以放大一块区域 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

  • 用js实现放大镜的效果的简单实例

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery

  • 用js实现放大镜效果

    本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下 该放大区域用背景图片放大 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • js仿京东放大镜效果

    本文实例为大家分享了js仿京东放大镜效果的具体代码,供大家参考,具体内容如下 1.效果1:鼠标经过前 2.效果2:鼠标放上去,弹出右边放大镜 3.效果3:鼠标在小盒子移动,放大镜跟着移动 4.源代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q

  • js放大镜放大图片效果

    我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le

随机推荐