原生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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 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
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
谈谈JS中的!!
2017/12/07 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
《学棋》教后反思
2014/04/14 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
安全口号大全
2014/06/21 职场文书
作风建设年度心得体会
2014/10/29 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android