1、html代碼和jquery代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0, minimun-scale=1.0,user-scalable=no;"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="js/auto_rem.js"></script> <link rel="stylesheet" href="css/style.css" /> </head> <body> <header class="fixed top-nav"> <a class="back"></a> <span class="title">公屏</span> <a class="home"></a> </header> <div class="gp-body"> <div class="main-box"> <ul class="all-list"> </ul> </div> <div class="fixed send-ms flex"> <div class="ipt s_txt flex1" contenteditable="true"></div> <span class="btn s_btn">發送</span> </div> </div> </body> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { //發表評論 $.getJSON('./js/test.json', function(result) { actFn($('.all-list'), result) }) function actFn(tar, data) { var data = data; startTranslate(); appendNewItem(); function startTranslate() { var key = 0; var leng = data.length; var time = setInterval(function() { if (key >= leng) { clearInterval(time); return; }; var _html = itemHtml(data[key].img_src, data[key].grade, data[key].words) key++; tar.append(_html); translateFn(); }, 400); } function appendNewItem() { $(".s_btn").click(function() { var text = $(".s_txt").html(); if (text == '') return; var _html = itemHtml('./img/heads.png', '最強王者', text) tar.prepend(_html); $(".s_txt").html(''); translateFn(); }); } function itemHtml(img, grade, words) { var _html = "<li class='item'>" + "<span class='img-box'>" + "<img src='" + img + "' alt=''>" + "</span>" + "<p class='para'>" + "<em class='grade'>" + grade + "</em>" + "<span class='words'>" + words + "</span>" + "</p>" + "</li>"; return _html; } var initTop = 20; var _top = initTop; function translateFn() { tar.find("li[class!='had']").show().each(function(item, key) { if ($(this).hasClass('had')) return; var that = this; var twidth = $(this).width(); var _left = $(window).width() + twidth; var rd = Math.random() * 100; var rdColor = getRandomColor(); var _height = $(window).height(); var time = 20000; if (_top > _height - 150) { if (initTop == 20) { _top = initTop = 60; } else { _top = initTop = 20; } } $(this).find('.grade').css({ color: rdColor }) $(this).css({ top: _top, right: "-" + twidth + "px" }); $(this).css({ transform: "translateX(-" + (_left + rd + 200) + "px)" }).addClass('had'); _top = _top + 80; }); } //隨機獲取顏色值 function getRandomColor() { return '#' + (function(h) { return new Array(7 - h.length).join("0") + h })((Math.random() * 0x1000000 << 0).toString(16)) } } }); //初始化彈幕 </script> </html>
2、scss代碼:
.gp-body { @extend .main; width: 100%; height: 100%; .main-box { background: url("../img/gp-bg.jpg") no-repeat; background-size: 100% 100%; height: 100%; width: 100%; overflow: hidden; overflow-y: scroll; .all-list { position: relative; } .item { display: inline-block; position: absolute; top: 0; right: -100%; display: none; transition: transform 12s ease-in-out; //css設置移動的時間及表現 ; .para { color: white; font-size: 14px; line-height: 37px; display: inline-block; overflow: hidden; border-radius: 20px; background: rgba(0, 0, 0, 0.6); padding: 0 10px; max-width: 400px; white-space: nowrap; text-overflow: ellipsis; .grade { margin-right: 3px; } } .img-box { float: left; img { width: 35px; height: 35px; border-radius: 100%; margin-right: 5px; } } } } }
評論彈幕的主要思想是重看不到的屏幕位置移動到屏幕看到的位置，最后消失，所以需要移動，這里采用的是css3 的translate 方法，可以實現目標的移動而在移動端不卡頓。
至於每條屏幕的飄移過程中之間的位置關系需要良好的設置，比如間隔時間插入每條評論，這樣就會在垂直位置上錯開，還有就是top位置的關系上的調節等，比如奇數排設置top20，偶數排設置60，這樣又可以錯開水平方面的每條評論的位置。如下的錯開:
以下是最終效果圖:
以下是demo數據:
[{ "img_src": "./img/heads.png", "grade": "最強王者", "words": "燈籠褲飛機失控打籠褲飛機失控打籠褲飛機失控打籠褲飛機失控打籠褲飛機失控打籠褲飛機失控打飛機" }, { "img_src": "./img/heads.png", "grade": "最強王者", "words": "燈籠褲飛機失控飛機失控飛機失控打飛機" }, { "img_src": "./img/heads.png", "grade": "最強王者", "words": "燈籠褲飛機失控打飛機" }, { "img_src": "./img/heads.png", "grade": "最強王者", "words": "燈籠褲飛機失控飛機失控飛機失控打飛機" }, { "img_src": "./img/heads.png", "grade": "最強王者", "words": "燈籠褲飛機失控飛機失控飛機失控打飛機" }, { "img_src": "./img/heads.png", "grade": "榮耀黃金", "words": "燈籠褲飛機失控打飛機" }, { "img_src": "./img/heads.png", "grade": "最強王者", "words": "燈籠褲飛機失控打飛機last" }]