原生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实现的图片点击滚动效果
Apr 29 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
安装vue-cli的简易过程
May 22 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
在antd中setFieldsValue和defaultVal的用法
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使用curl访问https示例分享
2014/01/17 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
php常用数组函数实例小结
2016/12/29 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
JS完成代码前最好对其做5件事
2013/04/07 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
python中Switch/Case实现的示例代码
2017/11/09 Python
python3中zip()函数使用详解
2018/06/29 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
经销商会议欢迎词
2014/01/11 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis