原生js实现商品放大镜效果


Posted in Javascript onJanuary 12, 2017

实现原理

大图上的放大镜:小图的显示区域=大图片大小:小图片大小=大图片的offsetLeft:小图片的offsetLeft

那么以上的公式中只有大图片的offsetLeft 是未知的,所以大图片的offsetLeft=大图片大小/小图片大小*小图片的offsetLeft

代码中有详细注释

完整代码

注:复制到本地后自行替换图片查看效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
#demo{display:block;width:400px;height:255px;margin:50px;position:relative;border:1px solid#ccc}
#small-box{position:relative;z-index:1}
#float-box{display:none;width:160px;height:120px;position:absolute;background:#ffffcc;border:1px solid#ccc;filter:alpha(opacity=50);opacity:0.5}
#mark{position:absolute;display:block;width:400px;height:255px;background-color:#fff;filter:alpha(opacity=0);opacity:0;z-index:10}
#big-box{display:none;position:absolute;top:0;left:460px;width:400px;height:300px;overflow:hidden;border:1px solid#ccc;z-index:1}
#big-box img{position:absolute;z-index:5}
</style>
</head>
<body>
<div id="demo">
  <div id="small-box">
    <div id="mark"></div>
    <div id="float-box"></div>
    <img src="images/small.jpg"/>
  </div>
  <div id="big-box">
    <img src="images/big.jpg"/>
  </div>
</div>
<script type="text/javascript">
  //在页面加载完后立即执行多个函数方案
  function addloadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload !="function"){
      window.onload=func;
    }
    else{
      window.onload=function(){
        if(oldonload){
          oldonload(); 
        }
        func();
      }
    }
  }
  //在页面加载完后立即执行多个函数方案结束
  addloadEvent(b);
  function b(){
   //获取外围容器
   var demo=document.getElementById("demo");
   //获取小图片容器
   var s_Box=document.getElementById("small-box");
   //获取大图片容器
   var b_Box=document.getElementById("big-box");
   //获取大图片
   var b_Image=b_Box.getElementsByTagName("img")[0];
   //获取放大镜
   var f_Box=document.getElementById("float-box");
   //覆盖在最上面的盖板为鼠标移动用
   var mark=document.getElementById("mark");
   //移入放大镜和大图片容器显示
   mark.onmouseover=function(){
   f_Box.style.display="block";
   b_Box.style.display="block";
   }
   //移出放大镜和大图片容器隐藏
   mark.onmouseout=function(){
   f_Box.style.display="none";
   b_Box.style.display="none";
   }
   //移动事件
   mark.onmousemove=function(ev){
   //获取鼠标坐标window兼容ie
   var e=ev||window.event;
   //当前鼠标x轴-容器相对body偏移量-小容器相对父容器偏移值-放大镜宽度的一半=放大镜的当前位置
   var left=e.clientX-demo.offsetLeft-s_Box.offsetLeft-f_Box.offsetWidth/2;
   //公式同上
   var top=e.clientY-demo.offsetTop-s_Box.offsetTop-f_Box.offsetHeight/2;
   //判断当放大镜移出容器时在边缘显示
   if(left<0){
    left=0;
   }else if(left>(s_Box.offsetWidth-f_Box.offsetWidth)){
    left=s_Box.offsetWidth-f_Box.offsetWidth;
   }
   if(top<0){
    top=0;
   }else if(top>(s_Box.offsetHeight-f_Box.offsetHeight)){
    top=s_Box.offsetHeight-f_Box.offsetHeight;
   }
   //放大镜当前位置
   f_Box.style.left=left+"px";
   f_Box.style.top=top+"px";
   //获取比例
   var z=b_Image.offsetWidth/s_Box.offsetWidth;
   //用放大镜偏移量*比例=大图片的偏移量,方向相反所以负值
   b_Image.style.left=-left*z+"px";
   b_Image.style.top=-top*z+"px";
   }
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
详解puppeteer使用代理
Dec 27 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 #Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 #Javascript
原生js实现淘宝购物车功能
Jun 23 #Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 #Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 #Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 #Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 #Javascript
You might like
php allow_url_include的应用和解释
2010/04/22 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Json解析的方法小结
2016/06/22 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
详解vue中组件参数
2018/07/09 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python实现简单爬虫功能的示例
2016/10/24 Python
numpy.random模块用法总结
2019/05/27 Python
django 单表操作实例详解
2019/07/30 Python
pandas的resample重采样的使用
2020/04/24 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
小学门卫岗位职责
2013/12/17 职场文书
生产班组长岗位职责
2014/01/05 职场文书
顶岗实习计划书
2014/01/10 职场文书
公司成立感言
2014/01/11 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2019新员工心得体会
2019/06/25 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL