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

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

<!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. NUOJ 88

    思路1: 找规律,本题若是直接暴力搜索,就是f(n)=2^n-1,然后f(n)%1000000,那么结果会越界:所以考虑用f(n+1)=(2*f(n)+1)%1000000,不过遇到较大数据的时候,会 ...

  2. apache 多站点配置

    安装时可以选择gbk-gb2312的编码(我自己用utf-8). 2: 修改本机的hosts文件,如下: 示例:127.0.0.1            localhost127.0.0.1      ...

  3. Python学习Day2笔记(集合和文件操作)

    1.集合的使用 列表是有序的可包含重复内容的 集合是无序的不可包含重复内容的 1) 集合关系测试 #列表去重list_1=[1,4,5,6,7,8,9,7,5,4,23,2] #有重复数据 list_ ...

  4. k8s总结（图片打开略慢请知晓）

  5. iOS开发小技巧--微博项目中的键盘工具条

    微博项目中的键盘工具条 项目中的键盘工具条不能使用inputAccessoryView,因为inputAccessoryView不能实现键盘隐藏的时候,工具条还显示在眼前,如图: 所以,果断决定将工具 ...

  6. 现阶段Mono版本下的WebAPI开发中存在的一些问题

    背景 由于公司积极推动各业务产品服务化,得益于容器化技术的不断发展及普及,项目组的服务也更多地基于Mono,Jexus,Docker,Kubernetes等类库.容器.管理工具运行于Linux系统上. ...

  7. 使用自定义tld标签简化jsp的繁琐操作

    最近做一个树形结构的展示,请求目标页面后,后台只返回简单的List,虽然有想过在jsp页面内做一些操作简化,但是太繁琐了,其他的标签又不能满足需求,所以只能自己做一个.使用tld标签可以简化jsp代码 ...

  8. 区间第K大（一）

    Problem: 给定无序序列S:[b, e),求S中第K大的元素. Solution 1.裸排序 2.现将区间均分成两段,S1, S2,对S1,S2分别排序,然后

  9. 菜鸟的Python学习之路（流水账）

    揭开Python的面纱 开始是因为别人说Python简单才开始学的,然后那段时间刚考完研,也没什么事,就多少瞅了瞅,然后发现语法的确简单很多,或者说简洁更合适. 当时看的是简明Python教程,没用多 ...

  10. javascript拖动div

    div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...