原生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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
原生js实现无缝轮播图效果
Jan 28 Javascript
js实现上传图片到服务器
Apr 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
smarty模板局部缓存方法使用示例
2014/06/17 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python 日期操作类代码
2018/05/05 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python实现宿舍管理系统
2019/11/22 Python
python实现一个猜拳游戏
2020/04/05 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
初中生自我鉴定
2014/02/04 职场文书
美术教师自我鉴定
2014/02/12 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
JavaScript分页组件使用方法详解
2021/07/26 Javascript