標籤：javascript 移動
這裡用的這個名稱可能不合適，不過暫時我也沒有想起比較對應的名字來，那就這樣先寫吧。
首先，我先表達下我想實現的是什麼效果：
想必大家都玩過，至少見過很多小遊戲，比方說超級瑪麗，比方說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>這樣簡單實現了所需要的效果，這次是完全自己根據自己的想象做出的實現，雖然寫的很亂，但是這會在看到代碼效果的時候還是特別開心，因為這是自己思考的結晶啊，不是分析別人代碼的結果，開森啊，哈哈，神一樣的男人，加油加油...
今天交鑰匙了，去看了下房子，比現在租的要好多了，周末搬家，哎，沒有買車，在城市裡搬家感覺好淒慘，挪來挪去的都不方便，也真苦了媳婦了，陪我東跑西顛的，我欠她的實在太多了。真希望可以快點交房，就不用到處找房子租住了....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
