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 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
JS实现公告上线滚动效果
Jan 10 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
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
vue中监听返回键问题
2019/08/28 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
django 发送手机验证码的示例代码
2018/04/25 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
班长竞选演讲稿
2014/04/24 职场文书
文明社区申报材料
2014/08/21 职场文书
电台广播稿范文
2015/08/19 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android