js实现简单放大镜效果

2024-11-01 20:32:54

用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实现电商商品展示放大镜特效

本文实例为大家分享了JS实现电商商品展示放大镜的具体代码,供大家参考,具体内容如下知识点 1.使用children获取字标签组 2.求当前鼠标坐标 3.碰撞检测 4.大小盒子通过比例同步运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
javascript实现商品图片放大镜

优化原因现在的电商商城项目解决的主要是购买商品的问题,那么购买商品主要要看清楚商品表面外形的主要特征和细节,如果图片处理过小,或者细节过于模糊,就需要做一个商品高清图片放大局部的功能. 技术关键点 1.左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个
用js实现放大镜的效果的简单实例

第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery
js面向对象之实现淘宝放大镜

本文实例为大家分享了js实现淘宝放大镜的具体代码,供大家参考,具体内容如下描述: JS面向对象--淘宝放大镜实现图片的引用是一个大图,一个小图传输用的ajax,记得改成自己的ip地址,js和html都改一下效果: 实现: js文件: LoadMethod.js class LoadMethod{ static get LOAD_IMG_FINISH(){ return "load_img_finish"; } static init(sourceList){ let img=n
JavaScript实现京东放大镜效果

本文实例为大家分享了JavaScript实现京东放大镜展示的具体代码,供大家参考,具体内容如下实现效果: 1.鼠标放到图片上显示放大镜和详细图,鼠标离开时什么都不显示(效果消失) 2.鼠标一直在放大镜的中间,且放大镜随鼠标移动 3.放大镜不能出缩列图的盒子 4.鼠标放在详细图上详细图消失实现细节: 1.大盒子虽然比详细图的盒子宽度小,但是在逻辑上详细图的盒子属于大盒子 2.详细图不能使用浮动,因为盒子下面一般会有文字内容 3.以父盒子来定位详细图的盒子 4.放大镜鼠标选中为十字形 5
JavaScript图片放大镜效果代码[代码比较简单]

#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op
奇妙的Javascript图片放大镜

在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一
js放大镜放大图片效果

我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le
JavaScript实现图片放大镜效果

本文实例为大家分享了js实现图片放大镜效果的具体代码,供大家参考,具体内容如下 1.结构布局HTML代码 <div class="leftcon" id="left"> <img src="~/Content/images/风景-1.jpg" /> <div class="slide_box" id="box"></div> </div> <
JavaScript 图片放大镜（可拖放、缩放效果）第1/4页

前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

js实现简单放大镜效果

相关推荐

随机推荐