JavaScript隨機漂浮碰壁效果

螞蟻小編發表於2018-07-06
JavaScript隨機

本章節分享一段程式碼例項，實現了元素隨機漂浮，在邊緣會有觸碰效果。

程式碼比較常見於漂浮廣告，當然這種廣告是不推薦使用的，讓人感覺厭煩。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
  border: 0;
}
#main{
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
#img{
  width: 100px;
  height: 120px;
  background: #faa;
}
</style>
<script type="text/javascript">
window.onload = function() {
  var main = document.getElementById("main");
  sy = 0;
  speedy = 2;
  sx = 0;
  speedx = 2;
  imgh = 120;
  imgw = 100;
  winh = document.documentElement.clientHeight;
  winw = document.documentElement.clientWidth;
  function start() {
    sobj = setInterval(function() {
      sy += speedy;
      sx += speedx;
      //y軸運動
      if (sy <= 0) {
        speedy = -speedy;
      }
      if (sy >= winh - imgh) {
        speedy = -speedy;
        sy = winh - imgh;
      }
      //x軸運動
      if (sx <= 0) {
        speedx = -speedx;
      }
      if (sx >= winw - imgw) {
        speedx = -speedx;
        sx = winw - imgw;
      }
      main.style.top = sy + 'px';
      main.style.left = sx + 'px';
    }, 10)
  }
  start();
  main.onmouseover= function() {
    clearInterval(sobj);
  }
  main.onmouseout= function() {
    start();
  }
}
</script>
</head>
<body>
<div id="main">
  <div id="img"></div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function() {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var main = document.getElementById("main")，獲取元素物件；本程式碼用div替代圖片，main元素就作為這個圖片的父元素。

（3）.sy = 0，宣告一個變數並賦值為0，用來存main元素的縱向座標值。

（4）.speedy = 2，宣告一個變數並賦值為2，用來規定縱向運動速度。

（5）.sx = 0，宣告一個變數並賦值為0，用來存main元素的橫向座標值。

（6）.speedx = 2，宣告一個變數並賦值為2，用來規定橫向運動速度。

（7）.imgh = 120,圖片的高度。

（8）.imgw = 100，圖片的寬度。

（9）.winh = document.documentElement.clientHeight，獲取可視區域的高度。

（10）.winw = document.documentElement.clientWidth，獲取可視區域的寬度。

（11）.function start() {}，此函式是功能實現的核心。

（12）.sobj = setInterval(function() {},10)，每隔10毫秒執行一次回撥函式。

（13）.sy += speedy，設定橫向座標值。

（14）.sx += speedx，設定縱向座標值。

（15）.if (sy <= 0) {

  speedy = -speedy;

}，如果sy小於等於0，當開始速度是正數，這時候肯定是向下運動，必定會向下運動，當快衝出最低端的時候，速度也會取反，變為負數，這樣元素就向上運動，當要衝出可是去頂端，那麼就將運動速度取反，變為正數，也就會向下運動了。

（16）.if (sy >= winh - imgh) {

  speedy = -speedy;

  sy = winh - imgh;

}，上面其實已經介紹了，這裡不再重複。

（17）.main.onmouseenter = function() {

  clearInterval(sobj);

}，當受不了懸浮，會停止運動。

（18）.main.onmouseleave = function() {

  start();

}，滑鼠離開，開始運動。

二.相關閱讀:

（1）.獲取瀏覽器客戶區尺寸參閱javascript獲取瀏覽器視口尺寸程式碼例項一章節。

（2）.onmouseover事件參閱javascript mouseover事件一章節。

（3）.clearInterval()參閱clearInterval()一章節。

（4）.onmouseout事件參閱javascript mouseout事件一章節。

（5）.document.getElementById()參閱document.getElementById()一章節。

相關文章