原生js实现放大镜特效


Posted in Javascript onMarch 08, 2017

本文实例为大家分享了js实现放大镜特效的具体代码,供大家参考,具体内容如下

掌握页面元素定位和移动

放大镜关键原理:鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置定位大图片的相应位置

技术点:事件捕获、定位

offsetLeft与style.left的对比:
1)offsetLeft是与父级元素的距离,不包过滚动条的距离
2)style.left返回的是字符串,如30px,offsetLeft返回的是数值30
3)style.lft是可读写的,offsetLeft是只读的,所以要改变div的位置只能修改style.left
4)style.left的值需要事先定义,否则取到的值为空
难点:计算:如何让小图片的放大镜和大图片同步移动

距离定位图解:

原生js实现放大镜特效

具体代码:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 #demo{
 display: block;
 width: 400px;
 height: 255px;
 margin: 50px;
 position: relative;
 border: 1px solid #ccc;
 }
 #small-box{
 position: relative;
 z-index: 1;
 }
 #float-box{
 display: none;
 width: 160px;
 height: 120px;
 position: absolute;
 background: #ffffcc;
 border: 1px solid #ccc;
 filter: alpha(opacity=50);
 opacity: 0.5;
 }
 #mark{
 position: absolute;
 display: block;
 width: 400px;
 height: 255px;
 background-color: #fff;
 filter: alpha(opacity=0);
 opacity: 0;
 z-index: 10;
 }
 #big-box{
 display: none;
 position: absolute;
 top: 0;
 left: 460px;
 width: 400px;
 height: 300px;
 overflow: hidden;
 border: 1px solid #ccc;
 z-index: 1;
 }
 #big-box img{
 position: absolute;
 z-index: 5;
 }
</style>
<script>
 window.onload=function(){
 var $=function(id){
  return document.getElementById(id);
 }
 var Demo = $("demo");
 var SmallBox = $("small-box");
 var Mark = $("mark");
 var FloatBox = $("float-box");
 var BigBox = $("big-box");
 var BigBoxImage = BigBox.getElementsByTagName("img")[0];
 Mark.onmouseover = function(){
  FloatBox.style.display = "block";
  BigBox.style.display = "block";
 }
 Mark.onmouseout = function(){
  FloatBox.style.display = "none";
  BigBox.style.display = "none";
 }
 Mark.onmousemove = function(e){
  var _event = e||window.event//兼容多个浏览器的参数模式
  var left = _event.clientX - Demo.offsetLeft - SmallBox.offsetLeft - FloatBox.offsetWidth/2;
  var top = _event.clientY - Demo.offsetTop - SmallBox.offsetTop - FloatBox.offsetHeight/2;
  if(left < 0){
  left = 0;
  }else if(left > Mark.offsetWidth - FloatBox.offsetWidth){
  left = Mark.offsetWidth - FloatBox.offsetWidth;
  }
  if(top < 0){
  top = 0;
  }else if(top > Mark.offsetHeight - FloatBox.offsetHeight){
  top = Mark.offsetHeight - FloatBox.offsetHeight;
  }
  FloatBox.style.left = left + 'px';
  FloatBox.style.top = top + 'px';
  var percentX = left / (Mark.offsetWidth - FloatBox.offsetWidth);
  var percentY = top / (Mark.offsetHeight - FloatBox.offsetHeight);
  BigBoxImage.style.left = -percentX * (BigBoxImage.offsetWidth - BigBox.offsetWidth)+'px';
  BigBoxImage.style.top = -percentY * (BigBoxImage.offsetHeight - BigBox.offsetHeight)+'px';
 }
 }
</script>
<body>
<div id="demo">
 <div id="small-box">
 <div id="mark"></div>
 <div id="float-box"></div>
 <img src="img/macbook-small.jpg" />
 </div>
 <div id="big-box">
 <img src="img/macbook-big.jpg" />
 </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
js中switch case循环实例代码
Dec 30 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
微信小程序实现底部弹出模态框
Nov 18 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 #Javascript
正则 js分转元带千分符号详解
Mar 08 #Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 #Javascript
js/jq仿window文件夹框选操作插件
Mar 08 #Javascript
js实现上下左右弹框划出效果
Mar 08 #Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 #Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 #Javascript
You might like
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
Python高效编程技巧
2013/01/07 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python集合常见运算案例解析
2019/10/17 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
高中体育教学反思
2014/01/29 职场文书
讲座主持词
2014/03/20 职场文书
党员实事承诺书
2014/03/26 职场文书
班训口号大全
2014/06/18 职场文书
全运会口号
2014/06/20 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android