您好,登錄后才能下訂單哦!
案例簡(jiǎn)介
jQuery實(shí)現(xiàn)彈幕效果,代碼如下。
案例目錄
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery彈幕案例</title> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" /> </head> <body> <div class="box"> <div class="top"></div> <div class="bot"> <input type="text" id="txt" placeholder="我來(lái)說(shuō)兩句。。。" /> <button type="button" id="btn">發(fā)送</button> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function() { var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"]; $("#btn").on("click", function() { var randomColor = parseInt(Math.random() * colors.length); var randomY = parseInt(Math.random() * 400); $("<span></span>") //創(chuàng)建span .text($("#txt").val()) //設(shè)置內(nèi)容 .css("color", colors[randomColor]) //設(shè)置字體顏色 .css("left", "1400px") //設(shè)置left值 .css("top", randomY) //設(shè)置top值 .animate({ left: -500 }, 10000, "linear", function() { //到了終點(diǎn),需要?jiǎng)h除 $(this).remove(); }) //添加動(dòng)畫(huà) .appendTo(".top"); $("#txt").val(""); }); }); </script> </body> </html>
CSS部分
* { margin: 0; padding: 0; } .box { width: 1600px; height: 757px; } .top { width: 100%; height: 660px; position: relative; } .bot { width: 100%; height: 97px; background-color: #666666; position: relative; } #txt { width: 300px; height: 30px; border-radius: 5px; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -15px; border: none; } #btn { width: 60px; height: 30px; color: white; background-color: red; position: absolute; left: 955px; top: 34px; border: none; } span { position: absolute; color: #000; font-size: 50px; line-height: 1.5em; cursor: pointer; white-space: nowrap; }
效果展示
以上就是jQuery實(shí)現(xiàn)彈幕效果的代碼,希望對(duì)您有幫助!
源碼下載:jQuery彈幕
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。