jQuery實現(xiàn)彈幕特效
更新時間：2019年11月29日 08:27:34 作者：有一個進(jìn)大廠的夢
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)彈幕特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
案例簡介
jQuery實現(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="我來說兩句。。。" />
<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() {
//到了終點，需要刪除
$(this).remove();
}) //添加動畫
.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實現(xiàn)彈幕效果的代碼，希望對您有幫助！
源碼下載：jQuery彈幕
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jquery默認(rèn)校驗規(guī)則有哪些,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了深入了解query和params的使用區(qū)別，路由傳參的時候，有倆兄弟，一個叫query，一個叫parmas，你說他們倆長得也不像吧，可這用法實在是太類似了，下面就讓我們分別從vue路由和Node接收兩個角度講他們的區(qū)別,需要的朋友可以參考下2019-06-06
jQuery實現(xiàn)Flash效果上下翻動的中英文導(dǎo)航菜單代碼
這篇文章主要介紹了jQuery實現(xiàn)Flash效果上下翻動的中英文導(dǎo)航菜單代碼,實例分析了jQuery基于鼠標(biāo)hover事件控制頁面元素動畫效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
EasyUI Datebox 日期驗證之開始日期小于結(jié)束時間
這篇文章主要介紹了EasyUI Datebox 日期驗證之開始日期小于結(jié)束時間,需要的朋友可以參考下2017-05-05
本文重點給大家介紹jquery中的事件機(jī)制，涉及到onload和ready兩者的區(qū)別介紹，非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)_入門必看知識點。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
自己寫的一個菜單(因為是初學(xué) 不知道能不能算無限級)2010-05-05
本文分享了jQuery實現(xiàn)限制文本框的輸入長度的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
通過JQuery將DIV的滾動條滾動到指定的位置方便自動定位
本文為大家介紹下將DIV的滾動條滾動到其子元素所在的位置，方便自動定位,需要的朋友可以參考下2014-05-05
原作者是在body中不停的插入多個小div雪花來向下慢慢飄，一直飄到body的底部后，將雪花移除,于是，將原來的代碼稍加修改，讓他只是從屏幕的頂部飄落到屏幕底部（不是body的底部）后，就將雪花移除，另外將雪花改為fixed定位2013-01-01