js实现简单放大镜效果
更新时间：2020年03月07日 10:47:59 作者：oi520
这篇文章主要为大家详细介绍了js实现简单放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用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>
实现效果：
更多关于放大镜的精彩文章，请点击链接查看：《放大镜效果》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
制作论坛用到的输入框~想模仿百度之类的写一个自动匹配字符2013-06-06
这篇文章主要为大家详细介绍了如何利用JS实现AI版自动玩贪吃蛇小游戏，文中的示例代码讲解详细，对我们学习JS游戏开发有一定帮助，需要的可以参考一下2022-06-06
Bootstrap标签页（Tab）插件切换echarts不显示问题的解决
这篇文章主要给大家介绍了关于Bootstrap标签页（Tab）插件切换echarts不显示问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
下面小编就为大家分享一篇原生js实现移动端触摸轮播的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
今天小编就为大家分享一篇layui.tree组件的使用以及搜索节点功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JavaScript实现打印星型金字塔功能,结合具体实例形式分析了javascript针对输出任意给定行数星型金字塔图形的原理与相关实现技巧,需要的朋友可以参考下2017-09-09
在跨端项目开发中,uniapp是个不错的框架,下面这篇文章主要给大家介绍了关于uni-app小程序沉浸式导航实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要帮助大家简单实现JavaScript弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
下面小编就为大家带来一篇js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要为大家详细介绍了JS实现字体背景跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
最新评论