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的跳转有关.有两个跟屏幕的旋转有关.有两个跟导航栏动画 ...
随机推荐
- Base64编码和其在图片的传输的应用
Base64 [原文链接] 目前Base64已经成为网络上常见的传输8Bit字节代码的编码方式之一.做支付系统时,系统之间的报文交互都需要使用Base64对明文进行转码,然后再进行签名或加密,之后再进 ...
- ubuntu apt 换源
修改配置文件/etc/apt/sources.list 内容替换为 阿里镜像源 deb http://mirrors.aliyun.com/ubuntu/ vivid main restricted ...
- 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 被封了, ...
- 巨杉TechDay回顾 | WARNING！您参加的数据库沙龙热度已爆表……
自从2008年“大数据”这一概念被首次提出以来,在过去这10年中,几乎各行各业都或多或少受到了这一概念的影响.与此同时,在AI.云计算.物联网.区块链等新兴技术快速发展的今天,数据库己经成为了决定所有 ...
- 题解 洛谷 P4145 【上帝造题的七分钟2 / 花神游历各国】
题目 上帝造题的七分钟2 / 花神游历各国 题目背景 XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. 题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. ...
- Runtime.getRuntime.exec()执行linux脚本导致程序卡死有关问题
Runtime.getRuntime.exec()执行linux脚本导致程序卡死问题问题: 在Java程序中,通过Runtime.getRuntime().exec()执行一个Linux脚本导致程序被 ...
- Redis 数据结构的底层实现 (一) RealObject,embstr,sds,ziplist,quicklist
一.realObject Redis使用 string list zset hash set 五大数据类型来存储键和值.在每次生成一个键值对时,都会生成两个对象,一个储存键一个储存值.redis定义了 ...
- 慎用--skip-grant-tables命令
该命令作用是跳过授权表,也就是说谁都能进入mysql看到所有数据表,输入任意字符账号密码都可以 当忘记账号密码时可以使用改命令修改密码,但是要随用随关,重启mysql,不然服务器上会有很大的风险. 介 ...
- PHP Apache/Nginx/IIS等各环境下的伪静态配置
一.Apache的伪静态配置 1.网站根目录下需要有 .htaccess 文件,没有则自己创建一个,内容如下: <IfModule mod_rewrite.c> RewriteEngine ...
- egg.js 配置cors跨域
1.egg简述 Egg.js,为企业级框架和应用而生,是阿里开源的企业级 Node.js 框架. 2.特点 Egg 奉行『约定优于配置』,按照一套统一的约定进行应用开发,团队内部采用这种方式可以减少开 ...