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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
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 基本语法格式
2009/12/15 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
党员领导干部承诺书
2014/05/28 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
入党现实表现材料
2014/12/23 职场文书
行政答辩状范文
2015/05/21 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL