mac停靠栏动画
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停靠栏动画的更多相关文章
- Mac 上卸载 Java
如何在 Mac 上卸载 Java? 本文适用于: 平台: Macintosh OS X Java 版本: 7.0, 8.0 使用终端卸载 Oracle Java 注:要卸载 Java,必须具有管理员权 ...
- 【转】如何在Mac上卸载Java及安装Java
如何在 Mac 上卸载 Java? 本文适用于: 平台: Macintosh OS X Java 版本: 7.0, 8.0 使用终端卸载 Oracle Java 注:要卸载 Java,必须具有管理员权 ...
- MAC OS Sierra 10.12.6 下对固态硬盘SSD 开启TRIM功能
这个是对于不是mac原装SSD的情况下才做的操作... 大家都知道,苹果店卖的SSD硬盘那怕就是一个256G的也要1000多人民币,而市场上的也就400-500左右人民币,整整少了一半还要多,可见JS ...
- 如何使用Keka for Mac提取受密码保护的文件？用Keka提取文件的格式
如何使用Keka for Mac提取受密码保护的文件?keka Mac是很多人喜欢的压缩解压工具,以小巧,使用简单,界面简洁受到很多Mac用户的喜欢,你还可以使用它提取文件,下面我们就来介绍一下关于用 ...
- MAC高效软件必备-落雨
更新时间:2017年09月19日23:45:29 使用MAC有一年多,最想说的莫过于如何打造一个高效的使用Mac的体验. 1. MAC任务栏管理,窗口切换 1. Mac任务栏管理(类似于Windows ...
- Mac下JDK卸载方法
注:要卸载 Java,必须具有管理员权限,并且必须以 root 用户身份或者使用 sudo 工具来执行删除命令. 按照下面所示,删除一个目录和一个文件(符号链接): 1.单击位于停靠栏中的 Finde ...
- 如何在 Mac 上卸载 Java？
使用终端卸载 Oracle Java 注:要卸载 Java,您必须具有管理员权限,并且必须以 root 用户身份或者使用 sudo 工具来执行删除命令. 按照下面所示,删除一个目录和一个文件(符号链接 ...
- iOS：动画（18-10-15更）
目录 1.UIView Animation 1-1.UIView Animation(基本使用) 1-2.UIView Animation(转场动画) 2.CATransaction(Layer版的U ...
- 导航栏协议方法UINavigationControllerDelegate
关于UINavigationControllerDelegate: Delegate中一共有6个方法.其中两个跟控制器ViewController的跳转有关.有两个跟屏幕的旋转有关.有两个跟导航栏动画 ...
随机推荐
- laravel多条件模糊查询
1.运用cmd在项目根目录下创建路由组 php artisan make:controller queryController --resource 1.1数据库信息(student) CREATE ...
- JS高级---正则表达式
正则表达式 也叫规则表达式, 按照一定的规则组成的一个表达式, 这个表达式的作用主要是匹配字符串的 "我的电话:10086,他的电话:10010,你的电话:10000" 正则 ...
- pandas处理csv，分组统计
需求: /tmp/demo/data下有10个csv文件,按col0和col1分组分别统计col2和col3总和并计算col2和col3的商 # encoding:utf-8 import panda ...
- Keep-Alive 以及服务器心跳
Keep-Alive 来源 :http://www.nowamagic.net/academy/detail/23350305 服务器心跳 来源 :http://www.cnblogs.com/lw ...
- 阿里云负载均衡-note
公网负载均衡实例 公网类型的负载均衡实例可以通过Internet将客户端请求按照您制定的监听规则分发到添加的后端服务器ECS上. 在您创建公网负载均衡实例后,系统会为其分配一个公网服务地址,您可以将您 ...
- 部署prerender服务器
// 安装 git sudo apt-get install git sudo apt-get install curl // 请先确认服务器是否安装了curl 如果已经安装跳过即可 // 安装 no ...
- org.apache.catalina.connector.ClientAbortException: java.io.IOException: 您的主机中的软件中止了一个已建立的连接。
日志文件中有“java.io.IOException: 您的主机中的软件中止了一个已建立的连接.”错误 org.apache.catalina.connector.ClientAbortExcepti ...
- ET框架之自写模块SmartTimerModule
1.代码结构图 2.SmartTimer 模块Entity: using System; namespace ETModel { [ObjectSystem] public class SmartTi ...
- 经常犯的错误之递归写不全return
在写递归函数的时候,只在最后一层写return,中间的过程没有return,导致结果的丢失. 举个例子 LL query(LL i, LL k) { if (sum[i] < k) { ; } ...
- SQL中 select count(1) count中的1 到底是什么意思呢?和count(*)的区别
count(1),其实就是计算一共有多少符合条件的行. 1并不是表示第一个字段,而是表示一个固定值.其实就可以想成表中有这么一个字段,这个字段就是固定值1,count(1),就是计算一共有多少个1.同 ...