苹果dock效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100%;
position: fixed;
text-align: center;
bottom: 0;
left: 0;
}
#div1 img{
width: 64px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv1 = document.getElementById("div1");
var aImgs = oDiv1.getElementsByTagName("img");
var ainput = document.getElementsByTagName("input"); console.log(aImgs[0].getBoundingClientRect()); document.onmousemove = function(ev) {
//计算鼠标到每个图片之间的直线距离
var e = ev || event;
for (var i=0; i<aImgs.length; i++) {
//计算直线距离
//因为鼠标是到可视区的距离,所以,我们应该获取鼠标到可视区的距离-元素到可视区的距离
var a = Math.abs(e.clientY - aImgs[i].getBoundingClientRect().y - aImgs[i].offsetHeight / 2);
var b = Math.abs(e.clientX - aImgs[i].getBoundingClientRect().x - aImgs[i].offsetWidth / 2);
var c = Math.sqrt(a*a + b*b); if (c > 300) {
c = 300;
}
aImgs[i].style.width = 128 - ( c * 0.2 ) + 'px';
}
}
}
</script>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" /> <div id="div1">
<img src="img/1.png" alt="" />
<img src="img/2.png" alt="" />
<img src="img/3.png" alt="" />
<img src="img/4.png" alt="" />
<img src="img/5.png" alt="" />
</div>
</body>
</html>
问题:
只能在火狐下运行 谷歌下不行?
有待解决???
苹果dock效果的更多相关文章
- Mac Dock 效果及原理(勾股定理)
这个是苹果机上的 Dock 效果,Windows 上也有一款专门的模拟软件——RocketDock. 代码如下: <!doctype html> <html> <head ...
- 原生JS通过勾股定理计算苹果菜单效果
JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...
- 基于jQuery实现苹果Dock样式的菜单
爱编程小编之前我们分享过相当数量的jQuery菜单了,今天要给大家带来一款Dock样式的jQuery菜单,用过苹果的朋友都知道,它的Dock菜单非常酷,配合漂亮的图标就更加绚丽了.效果图如下: 在线预 ...
- 苹果Dock样式的菜单
在线演示 本地下载
- jQuery/CSS3实现Android Dock效果
在线演示 本地下载
- 8个超炫酷仿苹果应用的HTML5动画
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
- 原生JS实现苹果菜单
今天分享下用原生JS实现苹果菜单效果,这个效果的重点有以下几点 图标中心点到鼠标的距离的算法 利用比例计算图标的宽度 代码地址:https://github.com/peng666/blogs/blo ...
- 推荐5个应用 jQuery 特效的精美特效
1.jQuery歌词同步的音乐播放器插件 精巧实用 之前我们分享过很多音乐播放器和视频播放器,很多播放器的UI界面都非常酷,特别是利用HTML5和CSS3实现的一些动画特效.今天要分享的一款基于jQu ...
- 池建强 博客 Mac使用技巧 第一季
第1天: 今天推送的Mac技巧: 使用OS X,我们可以充分利用系统提供的多个Space,把不同的程序放到不同的Space,让我们的系统更有扩展性.如何增加Space呢?四指上推,在桌面的最上方会出现 ...
随机推荐
- 获取URL中的参数值
//获取url中ID的值function getParamByName(name, url) { var match = RegExp('[?&]' + name + '=([^&]* ...
- BIEE应用存储过程并从前台传参
1. RPD操作 1.1修改连接池属性 在连接脚本添加SQL,这里选择在查询前执行 新建SQL脚本
- html css jquery 回到顶部按钮
今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...
- c++设计模式-----抽象工厂模式
抽象工厂模式 要创建一组相关或者相互依赖的对象 作用:提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. UML类图 抽象基类: 1)AbstractProductA.Abstrac ...
- IOS Android支持中文与本地文件的读取写入
转自http://www.xuanyusong.com/archives/1069 和http://www.benmutou.com/archives/2094 前几天有个朋友问我为什么在IOS平台中 ...
- vue对比其他框架
对比其他框架 React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保 ...
- dplyr 数据操作 常用函数(2)
继上一节常用函数,继续了解其他函数 1.desc() 这个函数和SQL中的排序用法是一样的,表示对数据进行倒序排序. 接下来我们看些例子. a=sample(20,50,rep=T)a desc(a) ...
- jar中没有主清单属性
在导出jar时指定主类位置 或手动配置jar包中的MANIFEST.MF文件: 添加Main-Class: gui 参考: JAVA环境变量 CLASSPATH .;%JAVA_HOME%\lib\d ...
- Java NIO Channel之FileChannel [ 转载 ]
Java NIO Channel之FileChannel [ 转载 ] @author zachary.guo 对于文件 I/O,最强大之处在于异步 I/O(asynchronous I/O),它允许 ...
- HDU 5868 Different Circle Permutation(burnside 引理)
HDU 5868 Different Circle Permutation(burnside 引理) 题目链接http://acm.hdu.edu.cn/showproblem.php?pid=586 ...