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

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

<!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. 使用adb shell 进入手机修改文件的权限

    1.将android的tools目录加入到path中,或者直接在adb.exe路径下启动cmd窗口2.adb shell 进入手机后,发现是 $ ,不是 # 号3.在进入shell后运行 su ,就可 ...

  2. vs2015 安装之后安装MSSM 2016 导致 vs启动报错 System.ArgumentException 已添加了具有相同键的项，ActivityLog.xml

    如题,先是装了vs2015,开发什么的都没有问题,后来安装了SqlServer2016 MSSM,出大问题了,vs2015打开就报错,具体错误如上,还想还有个ActivityLog.xml 这个文件的 ...

  3. iOS地图 -- 定位初使用

    iOS的定位服务用到的框架是#import <CoreLocation/CoreLocation.h> 定位中用到的类是CLLocationManager 一.iOS8.0之前的定位 向用 ...

  4. JS获取URL地址参数

    <script> var url = "http://127.0.0.1/index.php?old_quantity=168&date=1478309879000$id ...

  5. Python笔记（5）类__方法与继承

    方法 类方法@classmethod,实例方法,静态方法@staticmethod,特殊方法,__init__ 形式上的区别:调用是通过类和实例进行,不能直接调用,有自己的特殊参数,如__init__ ...

  6. Python3 函数

    函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以自己创建函数,这 ...

  7. Neural Style学习1——简介

    该项目是Github上面的一个开源项目,其利用卷积神经网络的理论,参照论文A Neural Algorithm of Artistic Style,可以实现一种效果:两张图片,一张取其内容,另一张取其 ...

  8. 教你一招：在PowerPoint中自定义可输入文本的占位符

    日常生活中,当我们设计多媒体课件时,默认的版式其实已经够用了.但是,很多时候,我们需要更加个性一点,所以,我们需要自定义很多东西.本文介绍在PowerPoint中自定义可输入文本的占位符. 一.占位符 ...

  9. 解决：error: .repo/manifests/: contains uncommitted changes

    repo sync同步时提示出错:          error: .repo/manifests/: contains uncommitted changes 解决方法: 1.cd 进入.repo/ ...

  10. jQuery插件 -- Cookie插件jquery.cookie.js（转）

    Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存 ...