原生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 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
详解Javascript实践中的命令模式
May 05 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php输入数据统一类实例
2015/02/23 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
JQuery从头学起第二讲
2010/07/04 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
详解小程序横屏方案对比
2020/06/28 Javascript
编程语言Python的发展史
2014/09/26 Python
详解Django中的form库的使用
2015/07/18 Python
Python多线程爬虫简单示例
2016/03/04 Python
浅析Python基础-流程控制
2016/03/18 Python
Python实现文件复制删除
2016/04/19 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
pycharm设置注释颜色的方法
2018/05/23 Python
pandas值替换方法
2018/07/10 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
Python os库常用操作代码汇总
2020/11/03 Python
临床医学大学生求职信
2013/09/28 职场文书
服装设计专业毕业生推荐信
2013/11/09 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
初婚未育证明样本
2015/06/18 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python