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

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

<!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. mybatis缓存

    mybatis缓存http://www.cnblogs.com/QQParadise/articles/5109633.htmlhttp://www.mamicode.com/info-detail- ...

  2. Centos6 服务器病毒查杀命令历史

    top whereis vhowazeclu ll /usr/bin/v* more /usr/bin/vhowazeclu ps aux|grep vhowa ps aux|grep vhowaze ...

  3. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  4. [LintCode] Longest Increasing Subsequence 最长递增子序列

    Given a sequence of integers, find the longest increasing subsequence (LIS). You code should return ...

  5. 小巧数据库 Apache Derby 使用攻略

    1. Derby 介绍 将目光放在小 Derby 的原因是纯绿色.轻巧.内存占用小,分分钟在你机子跑起来,自己做点需要连接数据库的代码实践非常方便. 虽然 Mysql 也可以,多一种选择,不是也挺好么 ...

  6. linux perf - 性能测试和优化工具

    Perf简介 Perf是Linux kernel自带的系统性能优化工具.虽然它的版本还只是0.0.2,Perf已经显现出它强大的实力,足以与目前Linux流行的OProfile相媲美了. Perf 的 ...

  7. linux下ftp的配置

    最近公司要用到ftp,小菜鸡百度了一下教程,自己也总结一下 现在随便百度都是vsftpd的服务,所以这里我也是用vsftp 1.检测或安装vsftp 首先检查一下你的主机是否含有vsftp服务,关于r ...

  8. sp_executeSql 用法

    今天遇到了一个难题 就是把 一个拼接sql语句 的返回值 赋值给一个变量 经研究 要用sp_executeSql这个存储过程 据说是从sql 2005才开始有的 代码如下: declare @str ...

  9. 【bzoj4514】 Sdoi2016—数字配对

    http://www.lydsy.com/JudgeOnline/problem.php?id=4514 (题目链接) 题意 n个数,每个数值为a[i],有b[i]个,权值为c[i].若两个数能配对当 ...

  10. RHEL7 CentOS7 检查查看精简指令

    RHEL7 CentOS7 检查查看精简指令: //////////////////////////检查查看精简指令://///////////////////////////// ///////// ...