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 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
jQuery示例收集
Nov 05 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
javascript实现切换td中的值
Dec 05 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
vue实现简单学生信息管理
May 30 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
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
Python生成数字图片代码分享
2017/10/31 Python
Python 查看文件的读写权限方法
2018/01/23 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
python日志logging模块使用方法分析
2019/05/23 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
Python新手学习装饰器
2020/06/04 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
快递业务员岗位职责
2014/01/06 职场文书
教师党性分析材料
2014/02/04 职场文书
最常使用的求职信
2014/05/25 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2015年大学生工作总结
2015/04/21 职场文书
大学班长竞选稿
2015/11/20 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android