js放大镜放大购物图片效果


Posted in Javascript onJanuary 18, 2017

图片放大镜效果,供大家参考,具体内容如下

一难点:不让黄盒子出界

二难点:让大盒子相应移动(比例)

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>我的放大镜</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  .box{
   margin: 100px;
   position: relative;
  }
  .small{
   width: 350px;
   height: 350px;
   border: 1px solid #999;
   position: relative;
  }
  .select{
   display: none;
   width: 100px;
   height: 100px;
   background: rgba(255,255,0,0.4);
   position: absolute;
   left: 0;
   top: 0;
   cursor: move;

  }
  .big{
   display: none;
   position: absolute;
   left: 360px;
   top: 0;
   width: 450px;
   height: 450px;
   border: 1px solid #ccc;
   overflow: hidden;
  }
  .big img{
   position: absolute;
   left: 0;
   top: 0;
  }
 </style> 
</head>
<body>
 <div class="box">
  <div class="small" id="smallbox">
   <img src="images/001.jpg" alt="">
   <div class="select" id="mask" style="display:none;"></div>
  </div>

  <div class="big" id="bigbox">
   <img src="images/0001.jpg" alt="">
  </div>
 </div>

 <script> 
  var smallbox = document.getElementById('smallbox');
  var bigbox = document.getElementById('bigbox');
  var mask = document.getElementById('mask');
  var bigImg = bigbox.children[0];
  smallbox.onmouseover = function(){
   mask.style.display = "block";
   bigbox.style.display = "block";
  }
  smallbox.onmouseout = function(){
   mask.style.display = "none";
   bigbox.style.display = "none";
  }

  smallbox.onmousemove = function(event){
   var event = event || window.event;

   var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2;
   var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2;
   //不让黄盒子出界
   if(x < 0){
    x = 0;
   }else if(x > smallbox.offsetWidth - mask.offsetWidth){
    x = smallbox.offsetWidth - mask.offsetWidth;
   }

   if(y<0) {
    y = 0;
   }else if(y > smallbox.offsetHeight - mask.offsetHeight){
     y = smallbox.offsetHeight - mask.offsetHeight;
   }
   mask.style.left = x + "px";
   mask.style.top = y + "px";

   bigImg.style.left = -x/smallbox.offsetWidth * bigbox.offsetWidth + "px"; //注意是-x
   bigImg.style.top = -y/smallbox.offsetHeight * bigbox.offsetHeight + "px";
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
jquery的map与get方法详解
Nov 04 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
Jquery-data的三种用法
Apr 18 jQuery
浅谈Node.js之异步流控制
Oct 25 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
JS运算符简单用法示例
Jan 19 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
详解vue 中使用 AJAX获取数据的方法
Jan 18 #Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 #Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 #Javascript
jQuery中的一些小技巧
Jan 18 #Javascript
AngularJS Select(选择框)使用详解
Jan 18 #Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 #Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 #Javascript
You might like
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
php封装的page分页类完整实例
2016/10/18 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
了解重排与重绘
2019/05/29 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
Python中的两个内置模块介绍
2015/04/05 Python
python实现在windows下操作word的方法
2015/04/28 Python
Python实现telnet服务器的方法
2015/07/10 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
python语言中有算法吗
2020/06/16 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
审核会计岗位职责
2013/11/08 职场文书
水污染治理专业毕业生推荐信
2013/11/14 职场文书
一名老师的自我评价
2014/02/07 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书