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


Posted in Javascript onMay 16, 2017

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

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

Javascript 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 #Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 #Javascript
Vue.js tab实现选项卡切换
May 16 #Javascript
Vue.js手风琴菜单组件开发实例
May 16 #Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 #Javascript
js自定义瀑布流布局插件
May 16 #Javascript
简单实现js点击展开二级菜单功能
May 16 #Javascript
You might like
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
php将html转为图片的实现方法
2017/05/19 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
学习python处理python编码问题
2011/03/13 Python
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
解决Django中多条件查询的问题
2019/07/18 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
servlet面试题
2012/08/20 面试题
工作表扬信的范文
2014/01/10 职场文书
初婚未育证明样本
2014/10/24 职场文书
公务员检讨书
2014/11/01 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
红高粱观后感
2015/06/10 职场文书
2015教师节通讯稿
2015/07/20 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server