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 相关文章推荐
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
Jquery api 速查表分享
Jan 12 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
js判断是否是手机页面
Mar 17 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
JavaScript隐式类型转换代码实例
May 29 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类
2006/10/09 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
python实现SOM算法
2018/02/23 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
在求职信中如何凸显个人优势
2013/10/30 职场文书
企业消防安全制度
2014/02/02 职场文书
小区文明倡议书
2014/05/16 职场文书
门面房租房协议书
2014/08/20 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
不同意离婚上诉状
2015/05/23 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技