原生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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 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的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
golang与PHP输出excel示例
2016/07/22 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
JS实现可视化文件上传
2018/09/08 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Python实现把数字转换成中文
2015/06/29 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
python+opencv实现动态物体识别
2018/01/09 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
详解python之heapq模块及排序操作
2019/04/04 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
建材投资建议书
2014/05/16 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript