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 相关文章推荐
Google AJAX 搜索 API实现代码
Nov 17 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
放飞中国梦演讲稿
2014/04/23 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL