MAC停靠栏

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

			}

			html,body{

				height: 100%;

				overflow: hidden;

			}

			#wrap{

				position: absolute;

				bottom: 0;

				left: 0;

				width: 100%;

				text-align: center;

			}

			#wrap > img{

				width: 64px;

			}

		</style>

		<script type="text/javascript">

			window.onload=function(){

				var r=128;

				var imgNodes=document.querySelectorAll("#wrap > img");

				document.onmousemove=function(ev){

					ev=ev ||event;

					// alert(12);

					for(var i = 0;i<imgNodes.length;i++){

						// 获取图片到鼠标的垂直距离

						var a=imgNodes[i].getBoundingClientRect().left + imgNodes[i].offsetWidth/2 - ev.clientX;

						// 获取图片到鼠标的水平距离

						var b=imgNodes[i].getBoundingClientRect().top + imgNodes[i].offsetHeight/2 - ev.clientY;

						// 获取图片到鼠标的直线距离

						var c=Math.sqrt(a*a+b*b);

						if(c>=r){

							c=r;

						}

						imgNodes[i].style.width=128 - c*0.5 +"px";

					}

				}

			}

		</script>

	</head>

	<body>

		<dic id="wrap">

			<img src="images/1.png" alt="">

			<img src="images/2.png" alt="">

			<img src="images/3.png" alt="">

			<img src="images/4.png" alt="">

			<img src="images/5.png" alt="">

		</dic>

	</body>

</html>

mac停靠栏动画的更多相关文章

  1. Mac 上卸载 Java

    如何在 Mac 上卸载 Java? 本文适用于: 平台: Macintosh OS X Java 版本: 7.0, 8.0 使用终端卸载 Oracle Java 注:要卸载 Java,必须具有管理员权 ...

  2. 【转】如何在Mac上卸载Java及安装Java

    如何在 Mac 上卸载 Java? 本文适用于: 平台: Macintosh OS X Java 版本: 7.0, 8.0 使用终端卸载 Oracle Java 注:要卸载 Java,必须具有管理员权 ...

  3. MAC OS Sierra 10.12.6 下对固态硬盘SSD 开启TRIM功能

    这个是对于不是mac原装SSD的情况下才做的操作... 大家都知道,苹果店卖的SSD硬盘那怕就是一个256G的也要1000多人民币,而市场上的也就400-500左右人民币,整整少了一半还要多,可见JS ...

  4. 如何使用Keka for Mac提取受密码保护的文件？用Keka提取文件的格式

    如何使用Keka for Mac提取受密码保护的文件?keka Mac是很多人喜欢的压缩解压工具,以小巧,使用简单,界面简洁受到很多Mac用户的喜欢,你还可以使用它提取文件,下面我们就来介绍一下关于用 ...

  5. MAC高效软件必备-落雨

    更新时间:2017年09月19日23:45:29 使用MAC有一年多,最想说的莫过于如何打造一个高效的使用Mac的体验. 1. MAC任务栏管理,窗口切换 1. Mac任务栏管理(类似于Windows ...

  6. Mac下JDK卸载方法

    注:要卸载 Java,必须具有管理员权限,并且必须以 root 用户身份或者使用 sudo 工具来执行删除命令. 按照下面所示,删除一个目录和一个文件(符号链接): 1.单击位于停靠栏中的 Finde ...

  7. 如何在 Mac 上卸载 Java？

    使用终端卸载 Oracle Java 注:要卸载 Java,您必须具有管理员权限,并且必须以 root 用户身份或者使用 sudo 工具来执行删除命令. 按照下面所示,删除一个目录和一个文件(符号链接 ...

  8. iOS：动画（18-10-15更）

    目录 1.UIView Animation 1-1.UIView Animation(基本使用) 1-2.UIView Animation(转场动画) 2.CATransaction(Layer版的U ...

  9. 导航栏协议方法UINavigationControllerDelegate

    关于UINavigationControllerDelegate: Delegate中一共有6个方法.其中两个跟控制器ViewController的跳转有关.有两个跟屏幕的旋转有关.有两个跟导航栏动画 ...

随机推荐

  1. Your wechat account may be LIMITED to log in WEB wechat, error info: <error><ret>1203</ret><message>为了你的帐号安全，此微信号不能登录网页微信。你可以使用Windows微信或Mac微信在电脑端登录。Windows微信下载地址：WeChat for PC

    转载:https://zhuanlan.zhihu.com/p/76180564 微信网页版限制登录或禁止登录将影响一大批使用itchat等Web Api方案的微信机器人 网页版微信 API 被封了, ...

  2. mysql-sql分析策略及优化

    tranlation事务:从失败中回复到正常状态的方法多个应用并发访问数据库时,提供隔离方法 acid原子性:要么成功.要么失败一致性:数据保持“合理性”隔离型:多个事务同时并发执行,每个事务就像各自 ...

  3. c#字符串常用方法

    一.字符串常用方法 1.IndexOf("")   如果找到字符串出现的位置则为索引位置,否则返回-1,索引从0开始 2.string   Substring(  int  sta ...

  4. Spring MVC3 + Ehcache 缓存实现

    转自:http://www.coin163.com/it/490594393324999265/spring-ehcache Ehcache在很多项目中都出现过,用法也比较简单.一般的加些配置就可以了 ...

  5. GitBook相关使用以及配置笔记

    本地安装 GitBook的安装非常简单.您的系统只需满足这两个要求: NodeJS(推荐使用v4.0.0及以上版本) Windows,Linux,Unix或Mac OS X gitbook-cli 是 ...

  6. mysql获取字段信息

    SELECT TABLE_SCHEMA AS `databaseName`, TABLE_NAME AS `tableName`, COLUMN_NAME AS `columnName`, DATA_ ...

  7. python之路之网络基础

    c类地址

  8. pikachu练习平台（XSS-漏洞测试案例（cookie的窃取和利用、钓鱼攻击、XSS获取键盘记录））

    XSS-漏洞测试案例 xss案例 1.cookie的窃取和利用 2.钓鱼攻击 3.XSS获取键盘记录 在进行案例之前首先要搭建xss后台 搭建xss后台 1.在pikachu文件夹下面,把pkxss单 ...

  9. ffmpeg-- audio decoder

    测试代码来源于:http://ffmpeg.org/doxygen/trunk/decode_audio_8c-example.html /* * Copyright (c) 2001 Fabrice ...

  10. 2019 ICPC南京站网络赛 H题 Holy Grail（BF算法最短路）

    计蒜客题目链接:https://nanti.jisuanke.com/t/41305 给定的起点是S,终点是T,反向跑一下就可以了,注意判负环以及每次查询需要添加边 AC代码: #include< ...