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

效果图:

代码如下:

<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>

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

时间: 2017-02-28

js图片放大镜效果实现方法详解

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

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 图片放大镜(可拖放、缩放效果)第1/4页

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

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

原生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图片放大镜

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

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

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

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实现放大镜特效

本文实例为大家分享了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"

原生JS实现的放大镜特效示例【测试可用】

本文实例讲述了原生JS实现的放大镜特效.分享给大家供大家参考,具体如下: 最近在做ecshop的二次开发,遇到一些jquery插件与ecshop的冲突, 调整冲突的需要修改的地方又太多,修改起来得不偿失, 故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突! 下面介绍一下代码及实现过程: 首先,创建fangda.html文件 在文件头部的<head></head>中添加文件的css样式,即: <style type="text/css">

基于jQuery仿淘宝产品图片放大镜特效

在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 这些组件大同小异. 大家感兴趣的话可以去百度一下. 本文主要是使用非组件方法来做放大镜效果. 每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显,这里是 54X54  320X320  800X800. 首先看效果:鼠标经过小图时,大图随之切换. 首先是html <div c

用js实现放大镜的效果的简单实例

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

利用JS做网页特效_大图轮播(实例讲解)

废话不多说,直接上代码: <style> * { margin: 0px; padding: 0px; } .stage { width: 500px; height: 300px; border: 5px solid black; margin: 200px; position: relative; overflow: hidden; } .to-left, .to-right { position: absolute; top: 0px; width: 50px; height: 300p

js变形金刚文字特效代码分享

为大家分享的js变形金刚文字特效代码如下 -----------------------------------------------效果演示----------------------------------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js变形金刚文字特效&l

js图片放大镜实例讲解(必看篇)

1.图片放大镜的思路: 当打开页面时只有图片 首先,说一下基本效果和调理,图片放大镜,也就是当你鼠标移入当前的商品图片时,会出现一个小灰色的观察移动框,有点会出现一个对应部位的放大的图片. 然后当鼠标移动时,右边的放大镜会出现对应部位的放大图片 最后当鼠标移开后,小的观察框和放大的图片都会消失. 2.有了基本思路就看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

纯JS焦点图特效实例(可一个页面多用)

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co