用js制作淘宝放大镜效果


Posted in Javascript onOctober 28, 2020

本文实例为大家分享了js制作淘宝放大镜效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   img{
    width: 100%;
    height: 100%;
   }
   #content{
    width: auto;
    height: auto;
    margin-left: 200px;
    margin-top: 60px;
   }
   #content-left{
    position: relative;
    width: 420px;
    height: auto;
    float: left;
   }
   #middle{
    border: 1px solid #d2d2d2;
    width: 418px;
    height: 418px;
   }
   #small{
    width: 420px;
    height: auto;
   }
   #glass{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: pink;
    top: 0;
    opacity: 0.5;
    z-index: 1;
    display: none;
   }
   ul{
    width: inherit;
    height: 60px;
   }
   ul li{
    display: inline;
    height: 60px;
    list-style: none;
    float: left;
    margin: 10px;
   }
   #content-right{
    position: relative;
    width: 418px;
    height: 418px;
    border: 1px solid #ccc;
    float: left;
    margin-left: 10px;
    overflow: hidden;
    display: none;
   }
   #content-right img{
    position: absolute;
    width: 836px;
    height: 836px;
   }
  </style>
 </head>
 <body>
  <div id="content">
   <div id="content-left">
    <div id="middle">
     <div id="glass"></div>
     <img src="img/01.jpg"/>
    </div>
    <div id="small">
     <ul>
      <li><img src="img/1.jpg"/></li>
      <li><img src="img/2.jpg"/></li>
      <li><img src="img/3.jpg"/></li>
      <li><img src="img/4.jpg"/></li>
      <li><img src="img/5.jpg"/></li>
     </ul>
    </div>
   </div>
   <div id="content-right">
    <img src="img/001.jpg"/>
   </div>
  </div>
 </body>
 <script type="text/javascript">
  var smallLi = document.getElementById("small").getElementsByTagName("ul")[0].getElementsByTagName("li");
  var middle = document.getElementById("middle")
  var middleImg = middle.getElementsByTagName("img")[0]
  var contentRight = document.getElementById("content-right");
  var bigImg = contentRight.getElementsByTagName("img")[0]
  var glass = document.getElementById("glass");
  //获取放大镜大小
  var bigImgWidth = getStyle(bigImg,"width");
  var bigImgHeight = getStyle(bigImg,"height");
  var contentRightWidth = getStyle(contentRight,"width");
  var contentRightHeight = getStyle(contentRight,"height");
  var middleWidth = getStyle(middle,"width");
  var middleHeight = getStyle(middle,"height");
  var glassWidth = contentRightWidth/bigImgWidth*middleWidth;
  var glassHeight = contentRightHeight/bigImgHeight*middleHeight;
  var middleBorder = getStyle(middle,"border")
  glass.style.width = glassWidth + "px";
  glass.style.height = glassHeight + "px";
  for(var i =0;i<smallLi.length;i++){
   (function(index){
    smallLi[i].onmouseover = function(){
     middleImg.src = "img/0"+index+".jpg";
     bigImg.src = "img/00"+index+".jpg"
    }
   })((i+1));
  }
  middle.onmouseover = function(){
   contentRight.style.display = "block"
   glass.style.display = "block"
   middle.onmousemove = function(ev){
    var evt = ev||event
    var x = evt.x - content.offsetLeft -glass.offsetWidth/2 + window.scrollX - middleBorder
    var y = evt.y - content.offsetTop - glass.offsetHeight/2 + window.scrollY - middleBorder
    if(x<=middleBorder){
     x = middleBorder;
    }
    if(x>=middle.offsetWidth-glass.offsetWidth-middleBorder){
     x = middle.offsetWidth - glass.offsetWidth -middleBorder;
    }
    if(y<=middleBorder){
     y = middleBorder;
    }
    if(y>=middle.offsetHeight-glass.offsetHeight-middleBorder){
     y = middle.offsetHeight - glass.offsetHeight - middleBorder;
    }
    glass.style.left = x + "px"
    glass.style.top = y + "px"
    bigImg.style.left = -x*middleWidth/glassWidth + middleBorder*2 + "px"
    bigImg.style.top = -y*middleHeight/glassHeight + middleBorder*2 + "px"
    console.log(x)
    console.log(x*middleWidth/glassWidth)
   }
   middle.onmouseout = function(){
    contentRight.style.display = "none";
    glass.style.display = "none";
   }
  }
  function getStyle(obj,attr){//获取css属性
   return (obj.currentStyle)?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,false)[attr]);
  }
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
使用express来代理服务的方法
Jun 21 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
js实现百度搜索提示框
Feb 05 #Javascript
jQuery.Form上传文件操作
Feb 05 #Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 #Javascript
用jquery的attr方法实现图片切换效果
Feb 05 #Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 #Javascript
JS动态生成年份和月份实例代码
Feb 04 #Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 #Javascript
You might like
如何在PHP中进行身份认证
2006/10/09 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
js 验证密码强弱的小例子
2013/03/21 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
python安装Scrapy图文教程
2017/08/14 Python
python实现移位加密和解密
2019/03/22 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python通过实例讲解反射机制
2019/10/17 Python
python实现人机五子棋
2020/03/25 Python
Python如何使用input函数获取输入
2020/08/06 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
二年级语文教学反思
2014/02/02 职场文书
销售会议开幕词
2015/01/28 职场文书
防汛通知
2015/04/25 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书