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实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
element中的$confirm的使用
Apr 26 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代码
2008/04/09 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP微信支付开发实例
2016/06/22 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
python批量爬取下载抖音视频
2019/06/17 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
干部考核评语
2014/04/29 职场文书
青年志愿者活动方案
2014/08/17 职场文书
店铺转让协议书
2014/12/02 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技