<!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>

Page not found · GitHub

cameronmcefee / plax

视差背景的制作

☀【组件 - 工具】Parallax 视差的更多相关文章

  1. web组件工具之获取表单数据：webUtils

    本文需要的架包:commons-beanutils-1.8.3.jar.commons-logging-1.1.3.jar.servlet-api.jar. 本文共分为五部分:1)封装通用工具类:从表 ...

  2. Visual Studio: 一键卸载所有组件工具，彻底卸载干净。

    第一步.手动卸载VS主体 第二步.下载工具并解压 网盘下载地址:https://pan.baidu.com/s/1eSHRYxW 也可以在Github上下载最新版本:https://github.co ...

  3. 【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  4. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  5. Unity 自动生成组件索引类工具

    Unity 自动生成组件索引类工具 需求由来 我们在写UI类时 需要获取预设中的组件 joystick = transform.Find("joystick"); backgrou ...

  6. Android常用组件

    UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...

  7. Android常用组件【转】

    UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...

  8. Android经常使用开源组件汇总

    http://www.cnblogs.com/scige/p/3456790.html UI相关 图片 Android-Universal-Image-Loader:com.nostra13.univ ...

  9. VUE组件汇总

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

随机推荐

  1. C# addin 开发心得记录

    1.环境 2012 新建项目-2010外接程序 2.新建项-功能区  创建菜单等 发布: 1.InstallShield  2015 2.打包 说明按地址-https://msdn.microsoft ...

  2. Lucida Grande字体无法正常显示冒号的解决方案

    曾经贪图Mac OSX的UI漂亮,后来查到它用的是Lucida Grande字体,所以索性将win7也改成了那种字体,结果浏览器中的中文冒号全都显示为一个奇怪的符号.后来即使将字体设置回去也无法还原. ...

  3. 搭建linux环境下jenkins可移植环境

    1:背景 项目领域:android. 项目需求为:建立一个网站用于产品经理(以下称为PM)配置该apk所需服务插件,打包出包(包含:apk,文档,demo等等)给厂商并且记录打包出包等信息. 项目设计 ...

  4. MSSQL 各个发行版本版本号以及Compact 版本号

    终于开始写博客了. 不要笑啊. 下面是MSSQL 的发行版本以及版本号.自己整理的. http://support.microsoft.com/kb/321185/zh-cn SQL Server 2 ...

  5. 研究WCF并发及处理能力的控制

    WCF 跟并发 性能相关的几个配置:1.系统控制的客户端网络连接并发(如果服务端也需要并发请求的话这个参数也是需要的):          <configuration>          ...

  6. 深入理解shared pool共享池之library cache系列一

    结论 1,oradebug dump library_cache不同级别dump的library cache内容及粒度会有所区别,具体见测试开始部分2,本文测示基于oradebug dump libr ...

  7. ios&h5混合开发项目仿app页面跳转优化

    前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...

  8. 去掉Visual Studio 编辑器里中文注释的红色波浪线 转载

    我们通常用visual studio进行开发的时候,我们通常会用到一款比较流行比较方便的插件,那就是Visual Assist X,它可以增强Microsoft开发环境下的编辑能力,支持C/C++,C ...

  9. chrome输入框记住密码导致背景黄色的解决方案

    在form头部增加以下内容 <input type="text" style="display:hidden;"> <input type=& ...

  10. CoffeeScript飞一样的写javascript

    之前看到同事在使用coffeescript写js,当我看到那简介的coffee文件,就深深的被coffescript吸引了,简洁的语法,熟练之后会大大提升javascript的开发速度,写脚本也能像飞 ...