原生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 相关文章推荐
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
学习python 之编写简单乘法运算题
2016/02/27 Python
Python多继承原理与用法示例
2018/08/23 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python小程序实现刷票功能详解
2019/07/17 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
为数据库创建索引都需要注意些什么
2012/07/17 面试题
建筑实习自我鉴定
2013/10/18 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
静心口服夜广告词
2014/03/20 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
党支部特色活动方案
2014/08/20 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
家庭贫困证明
2015/06/16 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL