原生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 相关文章推荐
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
JavaScript中的 new 命令
May 22 Javascript
javascript 易错知识点实例小结
Apr 25 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+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
详解python深浅拷贝区别
2019/06/24 Python
python实现最速下降法
2020/03/24 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
高三生物教学反思
2014/01/25 职场文书
移风易俗倡议书
2014/04/15 职场文书
教师师德演讲稿
2014/05/06 职场文书
高中综合实践活动总结
2014/07/07 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
大学生年度个人总结
2015/02/15 职场文书
单位证明范文
2015/06/18 职场文书
Python之matplotlib绘制饼图
2022/04/13 Python