这里用的这个名称可能不合适，只是临时我也没有想起比較相应的名字来，那就这样先写吧。

首先，我先表达下我想实现的是什么效果：

想必大家都玩过，至少见过非常多小游戏，例如说超级玛丽。例如说flappy bird，在里面总看到马里奥或者小鸟就一直向前走啊向前飞啊。然后飞过了大河，跳过了深坑。终于到达终点，而在这个记录中我所关注的仅仅是背景的变化，就像以下的图示：

终于它到了城堡中，而我们的屏幕中又不会显示滚动栏。它是怎样运动的呢？

事实上，这个功能应该是个比較基础的功能了。仅仅是之前不够敏感。今天从公交车上看着窗外的风景一晃而过。我就突然想起了这么一个功能，然后来实现了下，果然有效。当背景不断变化的时候，果然运动感又强了非常多。

这里来简介下实现的关键点：

1、足够长的div。

2、当div超出屏幕长度的时候，就会出现横向滚动栏，而我们则将滚动栏隐藏；

3、当运动对象向右运动的时候，背景div的marginLeft也从0px不断减小，从而显示背景div的不同部分。

我不知道在各个游戏应用中是不是这样解决的，可是我这样做的时候确实是实现了这个效果，这样来上一下代码。来细说下（图做的非常粗糙，仅仅是为了实现效果）：

html语言：

<body style="overflow:hidden">

<div style="width:2000px;height:700px;background:red;" id="back">//2000px远超出屏幕宽度了

	<div style="width:300px;margin-left:600px;height:700px;background:yellow;float:left;"></div>//不同背景色在当中显示。明白区分所在div的不同位置

	<div style="width:300px;margin-left:600px;height:700px;background:blue;float:left;"></div>

</div>

<div style="position:absolute;z-index:10;background:#ccc;width:100px;height:100px;left:10px;top:300px;" id="move">//找一个移动的对象来模拟效果

	<input type="button" value="go" style="width:100px;height:100px;" onclick="go">

</div>

</body>

css部分：

<style type="text/css">

body{margin:0px;padding:0px;}

</style>

javascript部分：

<script type="text/javascript">

window.onload=function go(){

	var move=document.getElementById("move");

	var back=document.getElementById("back");//获取两个div对象

	var ss=setInterval(function(){

		var now=parseInt(back.offsetLeft);

		move.style.left=move.offsetLeft+1+"px";

		back.style.marginLeft=now-1+"px";//这是今天须要先查的关键点margin-left在这里能够写成marginLeft。这里的Left注意大写L

	},10);

}

</script>

这样简单实现了所须要的效果。这次是全然自己依据自己的想象做出的实现，尽管写的非常乱。可是这会在看到代码效果的时候还是特别开心，由于这是自己思考的结晶啊。不是分析别人代码的结果，开森啊，哈哈，神一样的男人。加油加油...

今天交钥匙了，去看了下房子。比方今租的要好多了。周末搬家，哎，没有买车，在城市里搬家感觉好凄慘，挪来挪去的都不方便，也真苦了媳妇了，陪我东跑西颠的。我欠她的实在太多了。真希望能够快点交房，就不用到处找房子租住了....

js制造运动的假象-------Day63的更多相关文章

  1. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  2. JS缓冲运动案例：右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  3. JS完美运动框架

    这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...

  4. js缓冲运动

    缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...

  5. 原生js小球运动

    //html代码 <input type="button" value="小球运动" /> <div></div> //js ...

  6. Three.js创建运动立体几何体示例

    效果图 安装 帧率统计工具 变量控制GUI demo 效果图 安装 npm install three 帧率统计工具 // 监听动画帧率 var Stats = function () { var m ...

  7. JS的运动1（从简单到复杂运动，从单一属性到多属性同时进行的运动过程分析）

    js运动原理 运动基础 在js中,让一个元素动起来的最简单的方式,就是点击按钮,让元素移动.下面是一个简单的案例:(下面几个案例的的html和css都是采用这个为例) <!DOCTYPE htm ...

  8. JS完美运动框架【利用了Json】

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. JS缓冲运动案例

    点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...

随机推荐

  1. CAD设置超链接（网页版）

    超链接(Hyperlink)可以看做是一个“热点”,它可以从当前Web页定义的位置跳转到其他位置. 设置对象动态提示事件回调函数. //设置对象动态提示事件回调函数 function DoInputP ...

  2. Java A

    4.在ORACLE大数据量下的分页解决方法.一般用截取ID方法,还有是三层嵌套方法. 答:一种分页方法 <% int i=1; int numPages=14; String pages = r ...

  3. No-7.运算符

    数学符号表链接:https://zh.wikipedia.org/wiki/数学符号表 01. 算数运算符 是完成基本的算术运算使用的符号,用来处理四则运算 运算符 描述 实例 + 加 10 + 20 ...

  4. 第3节 hive高级用法：15、hive的数据存储格式介绍

    hive当中的数据存储格式: 行式存储:textFile sequenceFile 都是行式存储 列式存储:orc parquet 可以使我们的数据压缩的更小,压缩的更快 数据查询的时候尽量不要用se ...

  5. WC2007 石头剪刀布 数学+最小费用最大流

    题面: 有N个人参加一场比赛,赛程规定任意两个人之间都要进行一场比赛:这样总共有N*(N-1)/2场比赛.比赛已经进行了一部分,我们想知道在极端情况下,比赛结束后最多会发生多少剪刀石头布情况.即给出已 ...

  6. php扩展1：filp/whoops（用于调试，方便定位错误点）

    一.composer下载filp/whoops: 1.在composer.json中添加:"filp/whoops": "*",如下所示: 2.执行compos ...

  7. LNMP构架搭建论坛

    1 yum install -y apr* autoconf automake bison bzip2 bzip2* compat* cpp curl curl-devel fontconfig fo ...

  8. centos6 磁盘与文件系统管理

    一.磁盘管理 磁盘构成 1.圆形磁盘 2.磁盘读取头 3.机械手臂 4.主轴马达 运作原理 数据存储在具有磁性物质的圆形磁盘上,读写操作主要是通过机械手臂上的磁盘读取头来达成,实际运作时,主轴马达让磁 ...

  9. PHP：GD库 图片水印处理

    文章来源:http://www.cnblogs.com/hello-tl/p/7592974.html <?php /** * 处理图片类 * 1.添加文字水印 * 2.添加图片水印 * 3.压 ...

  10. 安装 asp.net core 出错

    I received the same error message on a fresh Windows 10 install, with a fresh Visual Studio 2015 ins ...