js实现简单放大镜效果


Posted in Javascript onMarch 07, 2020

用js实现简单放大镜效果,供大家参考,具体内容如下

此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边。当鼠标移动时右边的大图片也会局部移动。这里的放大并不是真正的放大,而是等比例移动。下面是实现的代码:

css样式代码如下:

<style>
 .s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;}
 .s_box img{width: 400px;height: 300px;}
 .s_box span{width: 130px;height: 100px;background: rgba(200,200,200,0.5);position: absolute;left:0;top:0;display: none;cursor:move;}

 .b_box{width: 400px;height: 300px;overflow: hidden;position: absolute;left:500px;top:100px;display: none;}
 .b_box img{width: 1200px;height: 900px;position: absolute;left:0;top:0;}

 .list{margin: 0;padding: 0;list-style: none;position: absolute;left:50px;top:430px;}
 .list li{float: left;margin: 0 10px;}
 .list li img{width: 100px;height: 80px;}
</style>

html代码如下:

<body>
 <div class="s_box">
 <img src="../img/large1.jpg" alt="">
 <span></span>
 </div>
 <div class="b_box">
 <img src="../img/large1.jpg" alt="">
 </div>
 <ul class="list">
 <li><img src="../img/large1.jpg" alt=""></li>
 <li><img src="../img/large2.jpg" alt=""></li>
 </ul>
</body>

js主要代码如下:

// 分析:
// 1.选择元素
// 2.绑定事件
// 3.进入的时候显示元素
// 4.移动:遮罩层跟随鼠标移动的同时计算遮罩层的移动比例 、右侧大图,等比例移动
// 5.离开的时候隐藏元素 
<script>
 class Large{
 constructor(){
 this.sBox = document.querySelector(".s_box");
 this.sImg = document.querySelector(".s_box img");
 this.sSpan = document.querySelector(".s_box span");
 this.bBox = document.querySelector(".b_box");
 this.bImg = document.querySelector(".b_box img");
 // 点击小图切换大图的按钮
 this.li = document.querySelectorAll(".list li");
 }
 addEvent(){
 var that = this;
 this.sBox.onmouseover = function(){
 that.over();
 }
 this.sBox.onmousemove = function(eve){
 var e = eve || window.event;
 that.move(e);
 }
 this.sBox.onmouseout = function(){
 that.out();
 }
 // 切换图片按钮的点击事件:根据布局做出调整
 for(var i=0;i<this.li.length;i++){
 this.li[i].onclick = function(){
  that.sImg.src = this.children[0].src;
  that.bImg.src = this.children[0].src;
 }
 }
 }
 over(){
 this.sSpan.style.display = "block";
 this.bBox.style.display = "block";
 }
 move(e){
 // 计算遮罩层跟随鼠标移动时的left和top
 var l = e.pageX - this.sBox.offsetLeft - this.sSpan.offsetWidth/2;
 var t = e.pageY - this.sBox.offsetTop - this.sSpan.offsetHeight/2;
 // 边界限定
 if(l<0) l=0;
 if(t<0) t=0;
 if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
 l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
 }
 if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
 t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
 }
 // 设置遮罩层的位置
 this.sSpan.style.left = l + "px";
 this.sSpan.style.top = t + "px";
 // 根据遮罩层移动的距离计算比例
 var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
 var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
 // 根据上一步得到的比例,计算右侧大图要移动的当前值
 this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
 this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
 }
 out(){
 this.sSpan.style.display = "none";
 this.bBox.style.display = "none";
 }
 }

 // 启动
 var l = new Large();
 l.addEvent();

</script>

实现效果:

js实现简单放大镜效果

更多关于放大镜的精彩文章,请点击链接查看:《放大镜效果》

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

Javascript 相关文章推荐
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
webpack打包多页面的方法
Nov 30 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
JS实现可控制的进度条
Mar 25 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
js实现文字头像的生成代码
Mar 07 #Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 #Javascript
原生JS实现萤火虫效果
Mar 07 #Javascript
JavaScript实现轮播图片完整代码
Mar 07 #Javascript
JS实现瀑布流效果
Mar 07 #Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 #Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 #Javascript
You might like
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
浅谈Python中的闭包
2015/07/08 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python print不能立即打印的解决方式
2020/02/19 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
护士自我鉴定范文
2013/10/06 职场文书
2014升学宴答谢词
2014/01/26 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js