js制造运动的假象-------Day63
这里用的这个名称可能不合适，只是临时我也没有想起比較相应的名字来，那就这样先写吧。
首先，我先表达下我想实现的是什么效果：
想必大家都玩过，至少见过非常多小游戏，例如说超级玛丽。例如说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的更多相关文章
- JS缓冲运动案例：右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例：右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
- 原生js小球运动
//html代码 <input type="button" value="小球运动" /> <div></div> //js ...
- Three.js创建运动立体几何体示例
效果图 安装 帧率统计工具 变量控制GUI demo 效果图 安装 npm install three 帧率统计工具 // 监听动画帧率 var Stats = function () { var m ...
- JS的运动1（从简单到复杂运动，从单一属性到多属性同时进行的运动过程分析）
js运动原理 运动基础 在js中,让一个元素动起来的最简单的方式,就是点击按钮,让元素移动.下面是一个简单的案例:(下面几个案例的的html和css都是采用这个为例) <!DOCTYPE htm ...
- JS完美运动框架【利用了Json】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS缓冲运动案例
点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...
随机推荐
- ipv6工具类
package mapreduce.nat; import java.math.BigDecimal; import java.math.BigInteger; import java.net.Ine ...
- php腾讯云短信验证码
腾讯云短信控制台:https://console.cloud.tencent.com/sms 腾讯云短信 PHP SDK:https://github.com/qcloudsms/qcloudsms_ ...
- 单页vue路由router
Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- window10换系统为windows7
第一步 第二步 第三步 下载系统:http://www.dnxtc.net 1.GHO镜像安装器和WIN7,GHO文件必须一起放在除C盘外的其他盘的根目录 2.“GHO镜像安装器“工具上右键管理员方式 ...
- mysql group_concat函数详解
group_concat( [DISTINCT] 要连接的字段 [Order BY 排序字段 ASC/DESC] [Separator '分隔符'] ) 1. --以id分组,把price字 ...
- B4. Concurrent JVM 锁机制（synchronized）
[概述] JVM 通过 synchronized 关键字提供锁,用于在线程同步中保证线程安全. [synchronized 实现原理] synchronized 可以用于代码块或者方法中,产生同步代码 ...
- 【2019 1月集训 Day1】回文的后缀
题意: 给定 n,s,求有多少个字符集大小为 s ,长度为 n 的字符串,使得其不存在一个长度大于 1 的回文后缀. 答案对 m 取模. 分析: 考场见到计数题的链式反应,想写暴力—>暴力难写— ...
- 11.Spring通过工厂方法配置Bean
通过工厂方法配置Bean暴扣静态工厂方法和实例工厂方法. 1.静态工厂方法 调用静态工厂方法创建Bean是将对象创建的过程封装到静态方法中,当客户端需要对象时,只需要简单的调用静态方法,而不去关心创建 ...
- django-1创建项目创建app设置setting、urls、templates、views等
1. python -m django --version 查看版本 1.11.4 在需要创建项目的目录下执行: 2. django-admin startproject myblog => 创 ...