用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 金额文本框实现代码
Feb 14 Javascript
js简单抽奖代码
Jan 16 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
Angular实现表单验证功能
Nov 13 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
Next.js项目实战踩坑指南(笔记)
Nov 29 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实现过滤表单提交中html标签的方法
2014/10/17 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
法制宣传月活动总结
2014/04/29 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
学术会议通知范文
2015/04/15 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript