jQuery實現(xiàn)彈幕效果
更新時間：2017年02月17日 11:45:25 作者：5945wm
本文主要分享了jQuery實現(xiàn)彈幕效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#wrap{
width:800px;
height:550px;
background:#E9E8E8;
margin:0 auto;
position:relative;
}
#content{
width:750px;
height:400px;
background:#fff;
margin:0 auto;
border-radius: 15px;
position:relative;
overflow:hidden;
}
input:nth-of-type(1){
width:250px;
height:30px;
margin:20px 0 0 200px;
}
input:nth-of-type(2){
width:60px;
height:33px;
}
.p{
height:30px;
line-height:30px;
position:absolute;
top:0;
left:770px;
font-weight:900;
font-size: 30px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
</div>
<input type="text" id="txt" placeholder="一起來吐槽吧~"/>
<input type="button" value="發(fā)送" id="btn" />
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
$(function(){
$("#btn").click(function(){
var $value=$("#txt").val();
var $p=$("<p></p>");
$p.addClass("p");
$p.text($value);
$("#txt").val("");//點擊過后設(shè)置文本框內(nèi)容為空
var _top=Math.floor(Math.random()*($("#content").innerHeight()-30));
var _fontsize=16+Math.floor(Math.random()*10);
var _rgb="rgb(" + Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255)+")";
$p.css({"top":_top,"font-size":_fontsize,"color":_rgb});
$("#content").append($p);
var _timer=Math.ceil(Math.random()*4000)+3000;
$p.stop().animate({"left":"-500px"},_timer,function(){
$(this).remove();
});
});
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
jQuery前端框架easyui使用Dialog時bug處理
本文介紹了在jQuery前端框架easyui開發(fā)UI時，使用Dialog時發(fā)現(xiàn)遮罩無法覆蓋頁面內(nèi)容，而且對話框也顯示不出來，經(jīng)過一番研究，才發(fā)現(xiàn)問題所在，這里分享給大家，有相同情況的小伙伴可以參考下2014-12-12
這篇文章主要介紹了jquery解決客戶端跨域訪問問題,jQuery.ajax()支持get方式的跨域，這其實是采用jsonp的方式來完成的，需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄獪\談jquery的html方法里包含特殊字符的處理。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JQuery控制div外點擊隱藏而div內(nèi)點擊不會隱藏的方法
這篇文章主要介紹了JQuery控制div外點擊隱藏而div內(nèi)點擊不會隱藏的方法,涉及show、hide及stopPropagation等方法的使用技巧,需要的朋友可以參考下2015-01-01
第一次自定義jQueryUI Widget 又是第一次，現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。2010-11-11
這篇文章主要介紹了jQuery中not()方法用法,實例分析了not()方法的功能、定義及刪除與指定表達式匹配的元素的使用技巧,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄猨query獲取點擊控件的絕對位置簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
可輸入文字查找ajax下拉框控件 ComBox的實現(xiàn)方法
下面小編就為大家?guī)硪黄奢斎胛淖植檎襛jax下拉框控件 ComBox的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
今天小編就為大家分享一篇關(guān)于jquery層次選擇器的介紹，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了jQuery formValidator表單驗證 的相關(guān)資料,需要的朋友可以參考下2016-01-01