用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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 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二维数组排序详解
2013/11/06 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
asp 取文本框名称代码
2008/12/02 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
vue中轮训器的使用
2019/01/27 Javascript
Python 字符串换行的多种方式
2018/09/06 Python
详解python配置虚拟环境
2019/04/08 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
聚美优品陈欧广告词
2014/03/14 职场文书
法制报告会主持词
2014/04/02 职场文书
大学生赌博检讨书
2014/09/22 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
党员先进事迹材料
2014/12/19 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
PHP 时间处理类Carbon
2022/05/20 PHP