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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
详解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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP新手入门学习方法
2011/05/08 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php微信开发接入
2016/08/27 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
Python命令行解析模块详解
2018/02/01 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python批量启动多线程代码实例
2020/02/18 Python
关于Python错误重试方法总结
2021/01/03 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
中青班党性分析材料
2014/02/16 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android