原生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 相关文章推荐
js添加table的行和列 具体实现方法
Jul 22 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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制作静态网站的模板框架(一)
2006/10/09 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python区块及区块链的开发详解
2019/07/03 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
群众路线党课主持词
2014/04/01 职场文书
保安公司服务承诺书
2014/05/28 职场文书
英语专业自荐书
2014/06/13 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
新教师个人总结
2015/02/06 职场文书
立案决定书范文
2015/06/24 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android