来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

原生js简单实现放大镜特效,js放大镜特效

网上澳门金莎娱乐 1

原生js简单实现放大镜特效,js放大镜特效

本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下

普及知识:放大镜特效涉及到的几个值

offsetWidth    获取元素的宽度
网上澳门金莎娱乐,offsetHeight  获取元素的高度
offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距
offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距
scrollTop  内容滚动的上边距
scrollLeft 内容滚动的左边距
onmousemove  鼠标移动事件
onmouseover  鼠标划过事件

主要思路:

    1.鼠标移动,阴影区跟着移动
    2.鼠标移动,大图也跟着移动
    3.阴影区域与小图的比例 以及 大图显示区域与大图的比例 是一样的
    4.保证阴影区域以及大div.big在鼠标移动到div.small时显示

html实现

<div id="fangdajing">
    <div class="small">
      <img src="small.jpg" alt="网上澳门金莎娱乐 2">
      <div class="shadow"></div>
    </div>
    <div class="big">
      <img src="big.jpg" alt="网上澳门金莎娱乐 3">
    </div>
  </div>

css样式

//定位,大图显示区域和阴影区域最开始不显示
#fangdajing{
      width:450px;
      height:450px;
      position:relative;
    }
    .small{
      width:450px;
      height:450px;
      position:absolute;
      left:0px;
      top:0px;
    }
    .shadow{
      width:200px;
      height:200px;
      background:yellow;
      opacity:0.3;
      position:absolute;
      top:0;
      left:0;
      display:none;
    }
    .big{
      position:absolute;
      left:450px;
      width:356px;
      height:356px;
      overflow:hidden;
      display:none;
    }

js实现

1.获取对象

var fdj = document.getElementById('fangdajing');
var big = document.getElementsByClassName('big')[0];
var small = document.getElementsByClassName('small')[0];
var shadow = document.getElementsByClassName('shadow')[0];

2.鼠标的移入移出事件,当鼠标移入的时候,显示大图显示区以及阴影区域

  small.onmouseover = function(){
        big.style.display = 'block';
        shadow.style.display = 'block';
  }

3.

(1)鼠标移动,div.shadow跟着移动,先获取到shadow在small内的相对位置,已知鼠标点击位置距离页面的边距,fdj距离页面的边距,fdj以及shadow的宽高,让鼠标划过的位置一直位于shadow区域的中心点,所以可得shadow在small内的相对位置,之后进行判断,让shadow不能出边界,最后进行赋值操作

(2)shadow区域移动,大图显示相应的位置,即大图滚动相应的距离,大图和shadow的比例为big.offsetWidth/shadow.offsetWidth,以shadow的左上角为准,大图的滚动距离为left*相应比例

   small.onmousemove = function(ent){
    var e = ent || event;  //获取鼠标事件对象
    var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //获取shadow在small内的相对位置
    var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2;
    var tw = fdj.offsetWidth - shadow.offsetWidth; //获取shadow最大可移动距离
    var th = fdj.offsetHeight - shadow.offsetHeight; 
    //对shadow进行限制
    if(left < 0){
      left = 0;      
    }else if(left > tw){
      left = tw;
    }
     if(top < 0){
      top = 0;      
    }else if(top > th){
      top = th;
    } 
    //赋值
    small.style.left = left + 'px';
    small.style.top = top + 'px';    
    //大图跟着移动
    var sl = left * big.offsetWidth / shadow.offsetWidth;
    var st = top * big.offsetHeight / shadow.offsetHeight;
    big.scrollTop = st;
    big.scrollLeft = sl; 
  }

4.鼠标移出,大图以及shadow隐藏

  small.onmouserout = function(){
    big.style.display = 'none';
    shadow.style.display = 'none';    
  }

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

http://www.bkjia.com/Javascript/1212116.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1212116.htmlTechArticle原生js简单实现放大镜特效,js放大镜特效 本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下 普及知识...

前提先了解数学算法:求遮罩层mask宽度,大图、大图显示区、小图、遮罩层1、小图是大图等比缩放的2、遮罩层是大图显示区缩放的小图/大图 = 遮罩层/大图显示区遮罩层 = 大图显示区*(小图/大图); ------------------------------------------------大图活动区 = 大图-大图显示区小图活动区 = 小图-遮罩层

遮罩层偏移量/小图活动区 = 大图偏移量/大图活动区

大图偏移量 = 大图活动区*(遮罩层偏移量/小图活动区)大图偏移量 = (大图-大图显示区)*(遮罩层偏移量/(小图-遮罩层))

放大镜 == 100*100橘色方块简称:方块1

左窗口 == 200*200蓝色方块简称:方块2

右窗口 == 200*200紫色方块简称:方块3

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:原生js简单实现放大镜特效,js放大镜特效

关键词: