JavaScript实现图片放大镜效果


Posted in Javascript onJune 27, 2019

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

1、结构布局HTML代码

<div class="leftcon" id="left">
 <img src="~/Content/images/风景-1.jpg" />
 <div class="slide_box" id="box"></div>
</div>
<div class="rightcon" id="right">
 <img src="~/Content/images/风景-1.jpg" />
</div>

2、修饰结构css样式代码

img {
display: block;
}.leftcon {
width: 350px;height: 350px;
margin: 100px 20px 0px 312px;
float: left;position: relative;
box-shadow: 3px 3px 10px 0 #111111; /*给图片施加阴影效果 */
-webkit-box-shadow: 3px 3px 10px 0 #111111; /*兼容性处理*/
-moz-box-shadow: 3px 3px 10px 0 #111111;
}.leftcon img {
width: 100%;height: 100%;
}.leftcon .slide_box {
display: none; /*将小方块盒子隐藏*/
position: absolute;top: 0;left: 0;
width: 175px;height: 175px;
background: #000;opacity: 0.3;
cursor: move; /*改变鼠标的形状*/
}.rightcon {
display: none; /*将右边div隐藏*/
width: 350px;height: 350px;
margin-top: 100px;float: left;
overflow: hidden;position: relative;
}.rightcon img {
width: 200%;height: 200%;
position: absolute;left: 0px;top: 0px;
}

3、js获取事件对象

1)、Event是获取事件对象,对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、
鼠标的位置、鼠标按钮的状态,envet是windows的一个属性。 放大镜实现方法(获取右边图片定位)
2)、e.clientY:返回事件触发时鼠标相对于元素视口的Y坐标。
e.clientX:返回事件触发时鼠标相对于元素视口的X坐标。
这里的元素视口实际上代指就是浏览器,clientX是鼠标距离浏览器左边框的距离,
clientY是鼠标距离浏览器上边框的距离。
offsetTop获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。
这里就是左边的div相对于body即浏览器窗口的纵向距离
offsetLeft获取对象相对于版面或由offsetLeft属性指定的父坐标的计算顶端位置。
这里就是左边的div相对于body即浏览器窗口的纵横向距离
offsetHeight是对象的可见高度。这里是指小滑块的高度
offsetHeight是对象的可见宽度。这里是指小滑块的宽度

var leftone = document.getElementById('left');
var rightone = document.getElementById('right');
var box = document.getElementById('box');
var rimg = rightone.getElementsByTagName("img")[0];
function getPosition(e){ //这里的参数e就是代表event
 //首先我们要去判断事件源,获取事件源,也就是e
 var e=e||window.event; //实现兼容
 //理解:
 //这个表达式写全是这样:var e=event?event||window.event;
 //如果存在event,那么var e=event;而如果不存在event,
 //那么var e=window.event.那么可以看出确实能实现兼容
 var top = e.clientY-leftone.offsetTop-box.offsetHeight/2; 
 //计算小图容器里的鼠标坐标(要减去最外层的偏移)
 var left = e.clientX-leftone.offsetLeft-box.offsetWidth/2;
 //这里为什么除以2?是因为我们不除以2的话,事件源也就是鼠标就在这个小滑块的的右下角,并不美观
 //我们要让鼠标位于滑块的中心,所以宽高各减去一半

  //边界判断
  //获取小滑块最大纵向移动距离
  var maxtop = leftone.offsetHeight - box.offsetHeight; 
  //获取小滑块最大横向移动距离
  var maxleft = leftone.offsetWidth - box.offsetWidth; 
  var mintop = 0; //获取小滑块最小纵向移动距离
  var minleft = 0; //获取小滑块最大纵向移动距离
  var mvtop; //定义小滑块的纵向移动距离
  var mvleft; //定义小滑块的横向移动距离
  // 判断
  if (top<mintop) {
  box.style.top = mintop + "px";
   mvtop = mintop;
   //理解:
 //top是鼠标到浏览器的垂直距离-左边div顶部到浏览器的垂直距离-小滑块的高度的一半。
 //那么现在鼠标在小滑块的中心,也就是说,top就等于小滑块的顶部到左边div的垂直距离
 //如果top<0,就是说小滑块和左边div顶部重合,就让小滑块的top值为0,即鼠标继续向上移动,
 //小滑块不在移动,从而让小滑块的移动范围不能超过左边div的宽高范围
 //下方同理
  }else if(top>maxtop){
   box.style.top = maxtop + "px";
   mvtop = maxtop;
 //如果top>maxtop,就是说小滑块和左边div底部重合,就让小滑块的top值为maxtop,
 //即鼠标继续向下移动,小滑块不在移动,从而让小滑块的移动范围不能超过左边div的宽高范围
  }else{
   box.style.top = top + "px";
   mvtop = top;
   //不超过边界,则小滑块的垂直移动距离就等于top,即小滑块的顶部到左边div的垂直距离
  }
  if(left<minleft){
   box.style.left = minleft + "px";
   mvleft = minleft
  }else if(left>maxleft){
   box.style.left = maxleft + "px";
   mvleft = maxleft
  }else{
   box.style.left = left + "px";
   mvleft = left;
  }
 //因为右边div的图片是左边div的图片的两倍,而左边div和右边div都是小滑块的宽高的两倍,
 //而要让右边div放大左边的小滑块的包围图片,所以右边大图的定位坐标是小滑块的两倍,这样才能进行映射
 //右侧图片跟着运动:左侧小滑块移动多少,右侧跟着移动他的2倍即可
  rimg.style.top = -mvtop*2 + "px";
  rimg.style.left = -mvleft*2 + "px";
 }

4、鼠标移入、移出事件

左侧盒子鼠标移入,小滑块和右侧图片显示,衔接鼠标移动效果
onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡。

//鼠标移动效果
leftone.onmousemove = function(e){
 var e=e||window.event; //判断事件源
 box.style.display = "block";
  getPosition(e);
 rightone.style.display = "block";
}
//鼠标移出效果
leftone.onmouseleave = function(e){
 var e=e||window.event; //判断事件源
  box.style.display = "none";
  rightone.style.display = "none";
}

5、效果图

JavaScript实现图片放大镜效果

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

Javascript 相关文章推荐
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 #Javascript
微信小程序自定义组件实现环形进度条
Nov 17 #Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 #Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 #Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 #Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 #Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 #Javascript
You might like
生成php程序的php代码
2008/04/07 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
使用python存储网页上的图片实例
2018/05/22 Python
python批量下载抖音视频
2019/06/17 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
django和flask哪个值得研究学习
2020/07/31 Python
详解Anaconda 的安装教程
2020/09/23 Python
python中的测试框架
2020/11/13 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
医院信息公开实施方案
2014/05/09 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
慈善募捐倡议书
2015/04/27 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL