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 相关文章推荐
理解Javascript_09_Function与Object
Oct 16 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
vuex存值与取值的实例
Nov 06 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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
用PHP创建PDF中文文档
2006/10/09 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
JavaScript中Function详解
2015/02/27 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python 魔法函数实例及解析
2019/09/25 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
家佳咖啡店创业计划书
2013/12/27 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
企业员工集体活动方案
2014/08/17 职场文书
党员自评材料范文
2014/12/17 职场文书
转学证明范本
2015/06/19 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang