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 相关文章推荐
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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为php增加openssl模块的方法
2011/06/14 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php上传excel表格并获取数据
2017/04/27 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
毕业生自荐信
2013/12/14 职场文书
自荐书4要点
2014/01/25 职场文书
企业文明单位申报材料
2014/05/16 职场文书
数控机床专业自荐信
2014/05/19 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL