纯js仿淘宝京东商品放大镜功能

2024-09-27 04:43:38

效果图：

代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题</title>
 <style>
 *{
  margin: 0px;
  padding: 0px;
 }
 .imgContent{
  width: 420px;
  height: 300px;
  position: relative;
  margin-left: 50px;
  margin-top: 50px;
 }
 .imgContent>img{
  width: 420px;
  height: 300px;
 }
 </style>
</head>
<body>
 <div class="imgcontent" id="imgContent1">
 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488436622116&di=e3c2b2a5c847d6051d8daaec9a9a2131&imgtype=0&src=http%3A%2F%2F2a.zol-img.com.cn%2Fproduct%2F174_1200x900%2F888%2FceeY9tJ1QRFLk.jpg" alt="iphone7">
 </div>
</body>
<script>
 /*大致功能的思路：(完全按照自己的想法去实现的功能，肯定有很多地方优化，希望大家一起讨论)
 1、有一个放原始图片的盒子
 2、当鼠标移入这个盒子，在右侧创建一个相同大小的镜像盒子，镜像盒子里创建一个放大4倍的镜像图片，同时也在原始盒子里创建一个放大镜（若存在就display:block，若不存在就创建，镜像盒子同理）
 3、当鼠标移动时，原始盒子里的放大镜跟随鼠标移动（类似拖拽功能），镜像盒子里的图片的top和left值是原始盒子里放大镜的top和left值的-4倍
 4、当鼠标移出原始盒子时,隐藏镜像盒子和放大镜*/
 function Scaler(id){
 var me = this
 var originalDiv = document.querySelector("#"+id)
 var mirrorDiv = null
 var mirrorImg = null
 var scaler = null
 var real_left = originalDiv.offsetLeft
 var real_right = originalDiv.offsetWidth+originalDiv.offsetLeft
 var real_top = originalDiv.offsetTop
 var real_bottom = originalDiv.offsetHeight+originalDiv.offsetTop
 //创建镜像盒子
 this.createMirror = function(){
  var originalStyle = getComputedStyle(originalDiv)
  mirrorDiv = document.createElement("div")
  mirrorDiv.style.cssText = 'width:'+originalStyle.width+
      ';height:'+originalStyle.height+
      ';position:absolute;left:'+originalStyle.width+
      ';top:0px;margin-left:10px;overflow:hidden;';
  //创建镜像图片
  mirrorImg = document.createElement("img")
  mirrorImg.style.cssText = 'width:'+(originalDiv.offsetWidth*4)+
      'px;height:'+originalDiv.offsetHeight*4+'px;position:absolute;top:0px;left:0px;'
  mirrorImg.src = document.querySelector("#"+id+" img").src
  mirrorDiv.appendChild(mirrorImg)
  originalDiv.appendChild(mirrorDiv)
 }
 //创建放大镜
 this.createScaler = function(left,top){
  scaler = document.createElement("div")
  scaler.style.cssText = 'width:100px;height:100px;background-color:yellow;opacity:0.4;position:absolute;'
  scaler.style.top = top;
  scaler.style.left = left;
  originalDiv.appendChild(scaler)
 }
 //设置镜像图片位置
 this.setImgPosition = function(left,top){
  mirrorImg.style.left = '-'+left+'px'
  mirrorImg.style.top = '-'+top+'px'
 }
 //鼠标移入事件
 this.e_mouseover = function(){
  originalDiv.style.cursor = "move"
  if (!mirrorDiv) {
  me.createMirror()
  }else{
  mirrorDiv.style.display = "block"
  };
  if (!scaler) {
  me.createScaler(0,0)
  }else{
  scaler.style.display = "block"
  };
 }
 //鼠标移出事件
 this.e_mouseleave = function(){
  mirrorDiv.style.display = "none"
  scaler.style.display = "none"
 }
 //鼠标移动事件(关键代码)
 this.e_mousemove = function(e){
  // 判断鼠标是否移出原始盒子
  if (e.clientX > real_right || e.clientX < real_left || e.clientY > real_bottom || e.clientY < real_top ) {
  me.e_mouseleave()
  return false
  };
  // 鼠标到原始盒子顶部的距离
  var padTop = e.clientY-real_top
  // 鼠标到原始盒子左侧的距离
  var padLeft = e.clientX-real_left
  //放大镜跟随鼠标移动(-50是因为让鼠标在放大镜的中心)
  scaler.style.top = padTop-50;
  scaler.style.left = padLeft-50;
  //因为镜像图片放大了4倍，所以跟随移动的时候是4倍
  me.setImgPosition((padLeft-50)*4,(padTop-50)*4)
 }
 //注册事件监听
 originalDiv.onmouseover = me.e_mouseover
 originalDiv.onmouseleave = me.e_mouseleave
 originalDiv.onmousemove = function(e){
  me.e_mousemove(e)
 }
 }
 // 创建图片放大功能对象,参数为原始盒子id即可(放大镜大小，镜像图片放大倍数都可设为参数传递)
 new Scaler("imgContent1")
</script>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

原生js简单实现放大镜特效

本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下普及知识:放大镜特效涉及到的几个值 offsetWidth 获取元素的宽度 offsetHeight 获取元素的高度 offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距 offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距 scrollTop 内容滚动的上边距 scrollLeft 内容滚动的左边距
js实现放大镜特效

本文实例为大家分享了js放大镜特效的实现代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"
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
js图片放大镜效果实现方法详解

由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记... 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -.-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /* 图片标签 */ .mainImg{
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 图片放大镜（可拖放、缩放效果）第1/4页

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

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

效果图:(实例图片由自己添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝放大镜特效</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width:350px;height:
Javascript仿京东放大镜的效果

随便找一个图片吧.小伙伴们,想怎么玩就怎么玩(注意路径),亲自测试,绝对没问题. 话不多说,请看代码: <html> <head> <meta charset="utf-8"> <style type="text/css"> body,div{margin: 0; padding: 0;} #zhuti{ margin:50px; position: relative; } #small{ width: 300px;
原生js实现放大镜特效

本文实例为大家分享了js实现放大镜特效的具体代码,供大家参考,具体内容如下掌握页面元素定位和移动放大镜关键原理:鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置定位大图片的相应位置技术点:事件捕获.定位 offsetLeft与style.left的对比: 1)offsetLeft是与父级元素的距离,不包过滚动条的距离 2)style.left返回的是字符串,如30px,offsetLeft返回的是数值30 3)style.lft是可读写的,offsetLeft是只读的,所以要改变div的

纯js仿淘宝京东商品放大镜功能

相关推荐

随机推荐