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

 更新时间:2017年05月16日 14:55:55   作者:Cheny0815  
这篇文章主要为大家详细介绍了原生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="">
      <div class="shadow"></div>
    </div>
    <div class="big">
      <img src="big.jpg" alt="">
    </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';    
  }

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

相关文章

  • js快速与任意QQ号码建立临时对话

    js快速与任意QQ号码建立临时对话

    那时候在群里讨论的,吸纳很多人的方法与意见,修改而成的
    2008-10-10
  • js操作label给label赋值及取label的值示例

    js操作label给label赋值及取label的值示例

    给label赋值以及取label的值,取值及赋值代码如下,感兴趣的朋友可以参考下
    2013-11-11
  • 发一个数据过滤的代码,很简单,有用的着的拿去

    发一个数据过滤的代码,很简单,有用的着的拿去

    发一个数据过滤的代码,很简单,有用的着的拿去...
    2007-02-02
  • uniapp中vuex的应用使用步骤

    uniapp中vuex的应用使用步骤

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于uniapp中vuex的应用使用,需要的朋友可以参考下
    2022-08-08
  • Javascript条件判断使用小技巧总结

    Javascript条件判断使用小技巧总结

    我们已经知道,null 没有任何的属性值,并且无法获取其实体(existence)值。所以 null.property 返回的是错误(error)而不是 undefined 。
    2008-09-09
  • TypeScript 装饰器定义

    TypeScript 装饰器定义

    这篇文章主要介绍了TypeScript 装饰器定义,装饰器是一种新的声明,它可以作用于类声明 、方法 、访问器 、属性以及参数上,下面我们就来看看TypeScript 装饰器的具体定义吧,需要的朋友可以参考一下,希望对你有所帮助
    2021-12-12
  • 我的javascript 函数链之演变

    我的javascript 函数链之演变

    我的javascript 函数链之演变,需要的朋友可以参考下。
    2011-04-04
  • JavaScript 中Date对象的格式化代码方法汇总

    JavaScript 中Date对象的格式化代码方法汇总

    JavaScript默认的时间格式我们一般情况下不会用,所以需要进行格式化,下面小编给大家带来了三种js date对象格式化实例代码,需要的朋友参考下吧
    2017-09-09
  • 学习使用bootstrap的modal和carousel

    学习使用bootstrap的modal和carousel

    这篇文章主要教大家学会用bootstrap的modal和carousel,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript 拖放效果实现代码

    javascript 拖放效果实现代码

    JavaScript擅长于修改页面中的DOM元素,但是我们使用JavaScript通常只是实现一些简单功能,例如实现图片的翻转,网页中的标签页,等等。这篇文章将向你展示如何在页面中,对创建的元素实现拖放。
    2010-01-01

最新评论