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


Posted in Javascript onMarch 02, 2017

效果图:

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

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

Javascript 相关文章推荐
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
JSONP跨域请求
Mar 02 #Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 #Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 #Javascript
如何正确理解javascript的模块化
Mar 02 #Javascript
jquery实现左右滑动式轮播图
Mar 02 #Javascript
如何写好你的JavaScript【推荐】
Mar 02 #Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 #Javascript
You might like
信用卡效验程序
2006/10/09 PHP
让PHP支持页面回退的两种方法
2008/01/10 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
jquery 笔记 事件
2011/11/02 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
建议书的格式
2014/05/12 职场文书
物理学专业自荐信
2014/06/11 职场文书
六一儿童节标语
2014/10/08 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
楚门的世界观后感
2015/06/03 职场文书