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与函数式编程解释
Apr 27 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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获取字段名示例分享
2014/03/03 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
python实现线程池的方法
2015/06/30 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python requests设置代理的方法步骤
2020/02/23 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
个人批评与自我批评
2014/10/15 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript