这今天我们学习鼠标的各种事件，我给大家分享一下鼠标放大镜的效果。

希望有兴趣的朋友可以一块交流。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜效果</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
#wrap {
width: 400px;
height: 400px;
border: 1px solid black ;
position: absolute;
}
#image {
width: 100%;
height: 100%;
position: absolute;

}
#slider {
width: 150px;
height: 150px;
border: 1px solid gray ;
position: absolute;
/*top: 0;*/
background: rgba(255, 235, 0, 0.3);
display: none;
}
#wrap_max {
width: 700px;
height: 700px;
border: 1px solid gray ;
position: absolute;
left: 400px;
display: none;
overflow: hidden;

}
#image_max {
width: 1000px;
height: 1000px;
/*display: block;*/
}
</style>
</head>
<body>
<div id="wrap">
<img id="image"src="01.jpg" alt="" />  // 放置图片 
<div id="slider">

</div>
</div>
<div id="wrap_max">
<img id="image_max" src="01.jpg" alt="" />  //放置和上面一样的图片
</div>
</body>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
var image = document.getElementById('image');
var slider = document.getElementById('slider');
var wrapMax = document.getElementById('wrap_max');
var imageMax = document.getElementById('image_max');

wrap.onmousemove = function(event){
event = event || window.event;
slider.style.display = 'block'; //当鼠标移入wrap时，slider显示。
wrapMax.style.display = 'inline-block';
var disX = event.clientX - slider.offsetWidth / 2 ; // slider .offsetWidth/ 2 是让鼠标在slider的底部在中间显示
var disY = event.clientY - slider.offsetHeight / 2; // slider .offsetHeight/2 是让鼠标在slider的高在中间显示
var disMaxX = wrap.offsetWidth - slider.offsetWidth ; // slider在wrap移动的最大横向距离
var disMaxY = wrap.offsetHeight - slider.offsetHeight ; // slider 在wrap中移动的最大纵向距离
if (disX < 0) {
disX = 0
}else if (disX > disMaxX) {
disX = disMaxX ;
}
if (disY < 0) {
disY = 0
}else if (disY > disMaxY) {
disY = disMaxY ;
}
slider.style.left = disX +'px';
slider.style.top = disY + 'px';
var sealeX = disX / disMaxX ; // slider在wrap x轴 的移动 比例
var sealeY = disY / disMaxY ; // slider 在 wrap y轴的移动 比例
wrapMax.scrollLeft = (imageMax.offsetWidth - wrapMax.offsetWidth) * sealeX ; //wrapMax 在imageMax x 轴中的移动值
wrapMax.scrollTop = (imageMax.offsetHeight - wrapMax.offsetHeight) *sealeY ;

wrap.onmouseleave = function(){
slider.style.display = 'none';
wrapMax.style.display = 'none';
}
}

</script>
</html>

JS 做的鼠标放大镜（初级）的更多相关文章

  1. 用JS做关灯游戏（初级）

    这是一个很有意思的游戏,可以试着玩下. <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  2. js 实现淘宝放大镜功能，可更改配置参数 带完整版解析代码[magnifier.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...

  3. 【京东详情页】——原生js爬坑之放大镜

    一.引言 在商城的详情页中,放大镜的功能是很常见的.这里京东详情页就要做一个仿放大镜的效果,预览如下: 二.实现原理 实际上,放大镜的实现是单纯用几个div,鼠标移入其中一个小图div,触发事件显示另 ...

  4. JS 做时钟

    今天,给大家分享一个用JS做的时钟. <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  5. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  6. 使用Gadget 做usb鼠标键盘设备

    使用Gadget 做usb鼠标键盘设备 感谢TI社区提供的好帮助啊!http://e2e.ti.com/support/arm/sitara_arm/f/791/p/571771/2103409?pi ...

  7. socket.io+angular.js+express.js做个聊天应用(三)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...

  8. js做小数运算精度问题

    当js做小数运算时存在bug,大概是因为二进制和十进制转换之间的关系. bug如图 解决方案 1.运算结果后,乘以100再除以100.网上推荐这种方法但是乘以1000再除以1000依然存在精度问题 2 ...

  9. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

随机推荐

  1. POJ2528Mayor's posters[线段树 离散化]

    Mayor's posters Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 59683   Accepted: 17296 ...

  2. Java程序设计之整数分解

    题目:题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. 解题过程也很简单,下面直接上代码了: import java.util.ArrayList; import java. ...

  3. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 大型软件系统客户端数据同步的问题解决

    作为一个完整的整体信息化解决方案需要有足够强大的各种功能,这些功能相对独立,又互相依存.当有需要这样的功能时可以随时拿出来用,适当修改一下就可以满足要求.只有这样才能快速开发各种信息化系统,才能满足各 ...

  4. Windows下Nginx Virtual Host多站点配置详解

    Windows下Nginx Virtual Host多站点配置详解 此教程适用于Windows系统已经配置好Nginx+Php+Mysql环境的同学. 如果您还未搭建WNMP环境,请查看 window ...

  5. 基于SoCkit的opencl实验1-基础例程

    基于SoCkit的opencl实验1-基础例程 准备软硬件 Arrow SoCkit Board 4GB or larger microSD Card Quartus II v14.1 SoCEDS ...

  6. jquery-抖动图组轮播动画

    JQ匀速抖动图组轮播动画 一.HTML+CSS <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

  7. canvas缓动3

    这次缓动的是旋转旋转,写完之后才知道原来rotate是绕原点旋转,而且还带着rect本身的X与Y一起,所以我采用了translate达到位移效果,以免旋转到画布外面去,画完之后效果惨不忍睹,原来是忘记 ...

  8. 计算机中位(bit)， 字节(byte)， 字(word)的关系

    1.位(bit) 来自英文bit,音译为“比特”,表示二进制位.位是计算机内部数据储存的最小单位,11010100是一个8位二进制数.一个二进制位只可以表示0和1两种状态(21):两个二进制位可以表示 ...

  9. BZOJ4614 [Wf2016]Oil

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  10. npm 使用记录

    在 Mint 下安装 pencil,折腾半天,发现它对 firefox 的支持,只到 46.0 .本来打算研究下怎么用 xulrunner 来跑 pencil 这个 web 应用,查看项目资源的时候, ...