jQuery彈幕效果詳解

admin發表於2018-09-08
jQuery

本章節分享一段程式碼例項，它模擬紅絲線了彈幕效果功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-family: "微軟雅黑";
  font-size: 62.5%;
  background: #ccc;
}
.boxDom {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.idDom {
  width: 100%;
  height: 60px;
  background: #666;
  position: fixed;
  bottom: 0px;
}
.content {
  display: inline-block;
  width: 430px;
  height: 40px;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
.title {
  display: inline;
  font-size: 4em;
  vertical-align: bottom;
  color: #fff;
}
.text {
  border: none;
  width: 300px;
  height: 30px;
  border-radius: 5px;
  font-size: 2.4em;
}
.btn {
  width: 60px;
  height: 30px;
  background: #f90000;
  border: none;
  color: #fff;
  font-size: 2.4em;
}
.string {
  width: 300px;
  height: 40px;
  position: absolute;
  overflow: hidden;
  color: #000;
  font-size: 4em;
  line-height: 1.5em;
  cursor: pointer;
  white-space: nowrap;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  var pageW = parseInt($(document).width());
  var pageH = parseInt($(document).height());
  var boxDom = $("#boxDom");
  var btnDom = $("#btn");
  var Top, Right;
  var width;
  width = pageW;
  var colorArr = ["#cfaf12", "#12af01", "#981234", "#adefsa", "#db6be4", "#f5264c", "#d34a74"];
  btnDom.bind("click", auto);
  function auto() {
    var creSpan = $("<span class='string'></span>");
    var text = $("#text").val();
    creSpan.text(text);
    Top = parseInt(pageH * (Math.random()));
    if (Top > pageH - 90) {
      Top = pageH - 90;
    }
    creSpan.css({ "top": Top, "right": -300, "color": getRandomColor() });
    boxDom.append(creSpan);
    var spanDom = $("#boxDom>span:last-child");
    spanDom.stop().animate({ "right": pageW + 300 }, 10000, "linear", function () {
      $(this).remove();
    });
  }
  function getRandomColor() {
    return '#' + (function (h) {
      return new Array(7 - h.length).join("0") + h
    })((Math.random() * 0x1000000 << 0).toString(16));
  }
});
</script>
</head>
<body>
  <div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
      <div class="content">
        <p class="title">吐槽:</p>
        <input type="text" class="text" id="text" />
        <button type="button" class="btn" id="btn">發射</button>
      </div>
    </div>
  </div>
</body>
</html>

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

一.程式碼註釋:

（1）.$(function () {})，文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var pageW = parseInt($(document).width()，獲取文件的寬度。

（3）.var pageH = parseInt($(document).height())，獲取文件的高度。

（4）.var boxDom = $("#boxDom")，獲取id屬性值為boxDom的元素物件。

（5）.var btnDom = $("#btn")，獲取id屬性值為btn的元素物件。

（6）.var Top, Right，宣告兩個變數，用來儲存彈幕元素的top和right屬性值。

（7）.var width，宣告一個變數，下面會用到。

（8）.width = pageW，將文件的寬度賦值給變數。

（9）.var colorArr = ["#cfaf12", "#12af01", "#981234", "#adefsa", "#db6be4", "#f5264c", "#d34a74"]，彈幕顏色儲存在陣列。

（10）.btnDom.bind("click", auto)，為按鈕註冊click事件處理函式。

（11）.function auto() {}，事件處理函式，實現彈幕的核心。

（12）.var creSpan = $("<span class='string'></span>")，建立一個span元素，這其實就是彈幕元素。

（13）.var text = $("#text").val()，獲取文字框的value屬性值。

（14）.creSpan.text(text)，設定彈幕元素的文字內容。

（15）.Top = parseInt(pageH * (Math.random()))，獲取隨機top值高度。

（16）.if (Top > pageH - 90) {

  Top = pageH - 90;

}，設定top高度值的上限，就是為了實現不與底部傳送彈幕功能部分衝突。

（17）.creSpan.css({ "top": Top, "right": -300, "color": getRandomColor() })，設定彈幕元素的top、right和字型顏色。

（18）.boxDom.append(creSpan),將彈幕元素新增到boxDom中。

（19）.var spanDom = $("#boxDom>span:last-child")，獲取最後一個彈幕元素。

（20）.spanDom.stop().animate({ "right": pageW + 300 }, 10000, "linear", function () {

  $(this).remove();

});spanDom.stop().animate({ "right": pageW + 300 }, 10000, "linear", function () {

  $(this).remove();

})，以動畫方式設定設定元素的right屬性值。

動畫完成之後就刪除此元素。

（21）.function getRandomColor() {

  return '#' + (function (h) {

    return new Array(7 - h.length).join("0") + h

  })((Math.random() * 0x1000000 << 0).toString(16));

}獲取一個隨機顏色值。

二.相關閱讀:

（1）.parseInt()可以參閱JavaScript parseInt()一章節。

（2）.append()可以參閱jQuery append()一章節。

（3）.animate()可以參閱jQuery animate()一章節。

（4）.remove()可以參閱jQuery remove()一章節。

（5）.join()可以參閱JavaScript join()一章節。

相關文章