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

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

<!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. 查找数据库中重复的值的数据，having的使用，count(1),sum等聚会函数

    通过having代替where来使用count(1),sum()等函数.譬如如下数据id value1 21 32 33 53 6 可以写个语句统计value的分组 在这里,可以省略前面的sum(va ...

  2. http协议进阶（二）URL与资源

    一.URL的语法  URL是互联网资源的标准化名称 URL提供了一种定位互联网上任意资源的手段,但这些资源要通过不同方案(协议:比如http.ftp.smtp)来访问,因此URL语法会略有差异 大部分 ...

  3. iOS widget开发

    链接: iOS Widget开发 iOS开发之构建Widget iOS开发Widget iOS开发-widget基础 ios8新特性widget开发 ios 10 开发-widget实现 Widget ...

  4. 汇编语言标志位 含义 NV UP EI NG NZ AC PE CY

    缩写原意: Overflow of = OV NV [No Overflow] Direction df = DN (decrement) UP (increment) Interrupt if = ...

  5. spring-boot-starter-amqp踩坑记

    踩坑记录 近日在用spring boot架构一个微服务框架,服务发现与治理.发布REST接口各种轻松惬意.但是服务当设计MQ入口时,就发现遇到无数地雷,现在整理成下文,供各路大侠围观与嘲笑. 版本 当 ...

  6. Ubuntu 16.04安装QQ国际版图文详细教程

            因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...

  7. javascript 中断函数的使用 setInterval();

    <script type="text/javascript"> var i=1; var IR1 = setInterval("myMethod()" ...

  8. JavaMail简单版实验测试

    前言: 最近由于实现web商城的自动发送邮件功能的需求,故涉猎的邮箱协议的内部原理.现将简单版的Java Mail实例做个代码展示,并附上其中可能出现的bug贴出,方便感兴趣的读者进行测试! 1.载入 ...

  9. BZOJ 1432: [ZJOI2009]Function

    1432: [ZJOI2009]Function Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1046  Solved: 765[Submit][Sta ...

  10. spring-Formatter(格式化器)-validator(验证器)-错误信息定制

    项目结构