用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 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
extjs form textfield的隐藏方法
2008/12/29 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
json的使用小结
2016/06/08 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python 多线程中join()的作用
2020/10/29 Python
研究生自荐信
2013/10/09 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
企业年度评优方案
2014/06/02 职场文书
节约用电标语
2014/06/17 职场文书
小学数学教研活动总结
2014/07/01 职场文书
借名购房协议书范本
2014/10/06 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL