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

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

想必大家都玩过，至少见过非常多小游戏，例如说超级玛丽。例如说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. （转）淘淘商城系列——maven工程debug调试

    http://blog.csdn.net/yerenyuan_pku/article/details/72784074 上文我们已经实现了商品列表展示的功能,在实际开发中我们肯定是要经常对maven工 ...

  2. Jmeter之断言——检查点

    Jmeter里的断言相当于lr中的检查点.用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中的数据交互与预期一致. 使用断言的目的:在request的返回层面增加一层判断机制:因为re ...

  3. 【原创】如何编写c#用户登陆后用户名在前台显示

    这种肯定是判断session啦!!!!! @{ string username = (string)Session["username"]; user user = new use ...

  4. cal - 显示一个日历

    总览 cal [-mjy ] [月份 [年份 ] ] 描述 Cal 显示一个简单的日历.. 如果没有指定参数, 则显示当前月份. 选项如下所列: -m 显示星期一作为一周的第一天.. (缺省为星期日. ...

  5. 解决webstorm中vue语法没有提示

    首先看看webstrom内置的vue插件,打上勾,没有这个选项就要自己去下载插件了 如果插件还是没有语法提示,可以用下面的方法,自己添加语法进去搜索 unknown HTML tag attribut ...

  6. CSS Paint API绘制透明格子背景实例页面

    CSS代码: .box { width: 180px; height: 180px; background: paint(transparent-grid); } HTML代码: <div cl ...

  7. Python 1-2模块的循环导入问题

    run.py文件: import m1 # 第一次导入 # 验证解决方案一: ''' 正在导入m1 正在导入m2 ''' # print(m1.x) # print(m1.y) # 验证解决方案二: ...

  8. Linux高阶命令进阶

    1. 输出重定向 > (1>):覆盖输出,会覆盖掉原先的文件内容 >> (1>>) :追加输出,不会覆盖原始文件内容,会在原始内容末尾继续添加 2> :错误输 ...

  9. 用LAMP构架创建DISCUZ论坛

    # rpm -q httpd mariadb mariadb-server php php-mysql # yum -y install httpd mariadb-server php php-my ...

  10. 绑定IP 绑定设备

    首先引别人的组播测试如下 1. 一个udp client可以同时往多个组播地址发送数据,多个udpclient可以同时往一个组播发数据. 2. 本地udp必须监听组播端口,否则收不到数据.3. 一个u ...