纯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 相关文章推荐
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 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
Wordpress php 分页代码
2009/10/21 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
js版本A*寻路算法
2006/12/22 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
教你安装python Django(图文)
2013/11/04 Python
Python编码爬坑指南(必看)
2016/06/10 Python
python实现中文转换url编码的方法
2016/06/14 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
制冷与电控专业应届生求职信
2013/11/11 职场文书
大学生作弊检讨书
2014/02/19 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
Golang中异常处理机制详解
2021/06/08 Golang
vue中data里面的数据相互使用方式
2022/06/05 Vue.js