当前位置: 首页 > 编程笔记 >

原生js实现放大镜

艾心远
2023-03-14
本文向大家介绍原生js实现放大镜,包括了原生js实现放大镜的使用技巧和注意事项,需要的朋友参考一下

原理:左边阴影在左边图片上从左到右移动的时候,右边大框也在右边大图片上从左到右移动(尽管在视觉、原理和代码上是相反的);所谓放大,其实就是一张原本就很小的图对应一张原本就很大的图。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .small{
      width: 400px;
      height: 400px;
      position: relative;
      background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center;
      border: 1px solid #ccc;
    }
    .small .inner{
      width: 100px;
      height: 100px;
      background: yellow;
      opacity: 0.5;
      filter: alpha(opacity=50);
      position: absolute;
      left:0;
      top:0;
      display: none;
    }
    .big{
      width: 400px;
      height: 400px;
      position: absolute;
      left:410px;
      top:0;
      overflow: hidden;
      border: 1px solid #ccc;
      display: none;
    }
    .big img{
      width: 200%;
      height: 200%;
      position: absolute;
      left:0;
      top:0;
    }
  </style>
</head>
<body>
<div id="small" class="small">
  <div class="inner"></div>
</div>
<div id="big" class="big">
  <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/>
</div>
<script>
  var small=document.getElementById("small');
  var inner=small.getElementsByTagName('div')[0];
  var big=document.getElementById('big');
  var img=big.getElementsByTagName('img')[0];
  //当鼠标移入small的时候,inner和big显示
  small.onmouseover=function(){
    big.style.display='block';
    inner.style.display='block';
  };
  //当鼠标在small移动的时候:1)鼠标在inner的中间 2)inner跟随鼠标移动
  small.onmousemove=function(e){
    e=e||window.event;
    var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
    var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
    if(left<=0){
      left=0;
    }else if(left>=this.offsetWidth-inner.offsetWidth){
      left=this.offsetWidth-inner.offsetWidth
    }
    if(top<=0){
      top=0;
    }else if(top>=this.offsetHeight-inner.offsetHeight){
      top=this.offsetHeight-inner.offsetHeight
    }
    inner.style.left= left+'px';
    inner.style.top= top+'px';
    //当inner移动的时候,大图跟着一起移动,并且,大图和inner移动的方向相反;
    //或者理解为:左边阴影在图片上从左到右移动的时候,右边大框也在大图片上从左到右移动(尽管视觉上是相反的)。
    img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
    img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
  };
  //当鼠标移出的时候,inner和big隐藏;
  small.onmouseout=function(){
    big.style.display='none';
    inner.style.display='none';
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍原生js实现放大镜效果,包括了原生js实现放大镜效果的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看代码 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍原生js实现放大镜特效,包括了原生js实现放大镜特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现放大镜特效的具体代码,供大家参考,具体内容如下 掌握页面元素定位和移动 放大镜关键原理:鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置定位大图片的相应位置 技术点:事件捕获、定位 offsetLeft与style.left的对比: 1)offsetLeft是与

  • 本文向大家介绍原生js实现商品放大镜效果,包括了原生js实现商品放大镜效果的使用技巧和注意事项,需要的朋友参考一下 实现原理 大图上的放大镜:小图的显示区域=大图片大小:小图片大小=大图片的offsetLeft:小图片的offsetLeft 那么以上的公式中只有大图片的offsetLeft 是未知的,所以大图片的offsetLeft=大图片大小/小图片大小*小图片的offsetLeft 代码中有详

  • 本文向大家介绍原生JS实现简单放大镜效果,包括了原生JS实现简单放大镜效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了原生JS实现放大镜效果的具体代码,供大家参考,具体内容如下 效果图:(演示) 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍原生js简单实现放大镜特效,包括了原生js简单实现放大镜特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下 普及知识:放大镜特效涉及到的几个值 offsetWidth    获取元素的宽度 offsetHeight  获取元素的高度 offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时

  • 本文向大家介绍原生JS实现的放大镜效果实例代码,包括了原生JS实现的放大镜效果实例代码的使用技巧和注意事项,需要的朋友参考一下 这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好。 以上所述是小编给大家介绍的原生JS实现的放大镜效果实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,