☀【组件 - 工具】Parallax 视差
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
body{overflow:hidden;}
#box1{position:absolute;top:100px;left:670px;width:100px;height:20px;background:red;}
#box2{position:absolute;top:120px;left:670px;width:100px;height:20px;background:blue;}
#box3{position:absolute;top:0;left:50%;width:1px;height:600px;background:red;}
#box4{position:absolute;top:0;left:37.5%;width:1px;height:600px;background:red;}
#tip{position:absolute;background:green;color:white;}
</style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="tip"><span id="tip-horz"></span>|<span id="tip-vert"></span></div>
<script>
var throttle = function(fn, delay, immediate, debounce) {
var curr = +new Date(),
last_call = 0,
last_exec = 0,
timer = null,
diff,
context,
args,
exec = function() {
last_exec = curr;
fn.apply(context, args);
};
return function() {
curr = +new Date();
context = this;
args = arguments;
diff = curr - (debounce ? last_call : last_exec) - delay;
clearTimeout(timer); if (debounce) {
if (immediate) {
timer = setTimeout(exec, delay);
} else if (diff >= 0) {
exec();
}
} else {
if (diff >= 0) {
exec();
} else if (immediate) {
timer = setTimeout(exec, -diff);
}
} last_call = curr;
}
}; var debounce = function (fn, delay, immediate) {
return throttle(fn, delay, immediate, true);
}; var viewportW = document.documentElement.clientWidth
var initialized = false var oldx, oldy;
document.onmousemove = throttle(function(e) {
var posx = 0,
posy = 0,
e = e || window.event,
get = function(id) {
return document.getElementById(id);
},
box1 = get('box1'),
box2 = get('box2'),
tip = get('tip'),
tipHorz = get('tip-horz'),
tipVert = get('tip-vert'); if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
} else if (e.clientX || e.clientY) {
posx = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posy = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}; tip.style.top = +posy + 15 + 'px';
tip.style.left = +posx + 15 + 'px'; if (oldx == null || oldy == null) {
oldx = posx;
oldy = posy;
return;
} if (posx - oldx == 0) {
tipHorz.innerHTML = '----';
}
if (posx - oldx > 0) {
tipHorz.innerHTML = 'right';
box1.style.left = parseFloat(box1.offsetLeft) + (posx - oldx)/4 + 'px';
box2.style.left = parseFloat(box2.offsetLeft) + (posx - oldx)/4 + 'px';
}
if (posx - oldx < 0) {
tipHorz.innerHTML = 'left';
box1.style.left = parseFloat(box1.offsetLeft) + (posx - oldx)/4 + 'px';
box2.style.left = parseFloat(box2.offsetLeft) + (posx - oldx)/4 + 'px';
}
if (posy - oldy == 0) {
tipVert.innerHTML = '----';
}
if (posy - oldy > 0) {
tipVert.innerHTML = 'bottom';
}
if (posy - oldy < 0) {
tipVert.innerHTML = 'top';
} oldx = posx;
oldy = posy; if (!initialized) {
box1.style.left = viewportW / 2 - 50 - (viewportW / 2 - posx) / 4 + 'px'
initialized = true
}
}, 30, false);
</script>
</body>
</html>
☀【组件 - 工具】Parallax 视差的更多相关文章
- web组件工具之获取表单数据:webUtils
本文需要的架包:commons-beanutils-1.8.3.jar.commons-logging-1.1.3.jar.servlet-api.jar. 本文共分为五部分:1)封装通用工具类:从表 ...
- Visual Studio: 一键卸载所有组件工具,彻底卸载干净。
第一步.手动卸载VS主体 第二步.下载工具并解压 网盘下载地址:https://pan.baidu.com/s/1eSHRYxW 也可以在Github上下载最新版本:https://github.co ...
- 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- Unity 自动生成组件索引类工具
Unity 自动生成组件索引类工具 需求由来 我们在写UI类时 需要获取预设中的组件 joystick = transform.Find("joystick"); backgrou ...
- Android常用组件
UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...
- Android常用组件【转】
UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...
- Android经常使用开源组件汇总
http://www.cnblogs.com/scige/p/3456790.html UI相关 图片 Android-Universal-Image-Loader:com.nostra13.univ ...
- VUE组件汇总
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
随机推荐
- 移动设备日期选择插件(基于JQUERY)
上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...
- C#自定义线程池
自定义线程池-c#的简单实现 下面是代码,希望大家提出更好的建议: 1.ThreadManager.cs using System; using System.Threading; using Sys ...
- SQL2008安装提示"Microsoft visual studio 2008早期之前的版本"解决(这是我认为最简单有效的方法)
作者:冰封 日期:2013-10-18 原文地址:http://www.skywj.com/thread-9230-1-1.html 在安装SQL Server的时候提示 Microsoft visu ...
- 求最低分最高分---c#(冒泡排序的运用)
// 输入10个人的分数,去掉两个最高两个最低,求平均分 Console.Write("请输入人数:"); int renshu = int.Parse(Console.ReadL ...
- JavaScript 标准对象
在JavaScript的世界里,一切都是对象. 但是某些对象还是和其他对象不太一样.为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串: typeof 123; // ' ...
- 【转】Spring.NET学习笔记——目录
目录 前言 Spring.NET学习笔记——前言 第一阶段:控制反转与依赖注入IoC&DI Spring.NET学习笔记1——控制反转(基础篇) Level 200 Spring.NET学习笔 ...
- php文件锁(转)
bool flock ( int handle, int operation [, int &wouldblock] );flock() 操作的 handle 必须是一个已经打开的文件指针.o ...
- 24种设计模式--装饰模式【Decorator Pattern】
装饰模式在中国使用的那实在是多,中国的文化是中庸文化,说话或做事情都不能太直接,需要有技巧的,比如说话吧,你要批评一个人,你不能一上来就说你这个做的不对,那个做的不对,你要先肯定他的成绩,表扬一下优点 ...
- iOS push全方位解析(二)【译文】"——生成OpenSSL证书,Provisioning Profile
这是一篇来自raywenderlich的教程,内容翔实!结构简单透彻.讲解循序渐进.文章质量上乘!是一篇难的的博文!使用半瓶的英语水平翻译了一下: 1.[iOS push全方位解析](一) push的 ...
- js获取时间加多山天和时间戳转换成日期
function huoqu(){ var data = $("#data").val();//获取的时间 var day = $('#day').val();//往后 ...