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

首先,我先表达下我想实现的是什么效果:

想必大家都玩过,至少见过非常多小游戏,例如说超级玛丽。例如说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. spring中路径的注入

    @RequestMapping("${mgt}/file") //请求的路径的统一添加,需要在mvc层配置<context:property-placeholder loca ...

  2. 6-Java-C(无穷分数)

    题目描述: 无穷的分数,有时会趋向于固定的数字. 请计算[图1.jpg]所示的无穷分数,要求四舍五入,精确到小数点后5位,小数位不足的补0. 请填写该浮点数,不能填写任何多余的内容. 正确算法: 此题 ...

  3. webgl 的空间变换(下):空间变换

    在网上看了很多关于在三维世界中怎么把一个顶点经过一步步变化,最终呈现在我们的屏幕上的. 其实很多博客或者书籍已经讲的很清楚了,那为什么我还要特别再写一次博客来阐述自己观点呢?(这里只针对那些学习web ...

  4. BZOJ 2406 LuoguP4194 矩阵 有上下界可行流

    分析: 这道题乍一看……卧槽这都什么玩意…… 然后发现给了个A矩阵,要求一个可行的B矩阵,使得矩阵C=A-B的每一行的和的绝对值和每一列的和的绝对值的最大值最小…… 好拗口啊…… 什么最大值最小之类的 ...

  5. 数据库的ACID 简谈

    一.事务 定义:所谓事务,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位. 准备工作:为了说明事务的ACID原理,我们使用银行账户及资金管理的案例进行分析. 二.ACI ...

  6. [Python3网络爬虫开发实战] 1.2.1-Requests的安装

    由于Requests属于第三方库,也就是Python默认不会自带这个库,所以需要我们手动安装.下面我们首先看一下它的安装过程. 1. 相关链接 GitHub:https://github.com/re ...

  7. cgi fastcgi php-cgi php-fpm

      参考: 摘至:http://www.cnblogs.com/thinksasa/p/4497567.html 详说fastcgi,php-fpm的区别:http://segmentfault.co ...

  8. 杭电 1862 EXCEL排序(sort+结构体)

    Description Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能.   Input 测试输入包含若干测试用例.每个测试用例的第1行包含两个整数 N (<=100000 ...

  9. 对Kaldi nnet3进行奇异值分解(SVD)以减小模型大小

    用处 基于SVD实现模型压缩以适配低功耗平台     根据nnet3bin/nnet3-copy,nnet3-copy或nnet3-am-copy的"--edits-config" ...

  10. java-得到字符串中出现次数最最多的字符,并打印出字符以及出现次数

    最近面试总被面试到,整理出几种方式(有参考别人的部分) /** * java一个字符串中出现次数最多的字符以及次数 * @param args */ public static void main(S ...