前端显示
[html] view plain copy
<span style="font-size:18px"><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></span>
样式
[css] view plain copy
<span style="font-size:14px">html,body{margin:0pxpadding:0pxwidth: 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
}</span>
JS
[javascript] view plain copy
<span style="font-size:14px">$(function(){
var pageW=parseInt($(document).width()) //获取页面宽度
//alert(pageW)
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()
//alert(text)
creSpan.text(text)
//alert(creSpan.text())
Top=parseInt(pageH*(Math.random()))
var num=parseInt(colorArr.length*(Math.random()))
if(Top>pageH-90){
Top=pageH-90
}
//creSpan.css({"top":Top,"right":-300,"color":colorArr[num]})
creSpan.css({"top":Top,"right":-300,"color":getRandomColor()})//扩展字幕颜色
boxDom.append(creSpan)
var spanDom=$("#boxDom>span:last-child")
//alert(spanDom.html())
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))
}
})</span>
随便写了一个，应该差不多。喜欢的话就参考一下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style type="text/css">
.barrager{width:800pxbackground:#fffmargin:0 autoheight:500pxoverflow:hiddenposition:relative}
.barrager div{position:absolute}
.addBarrager{border:1px solid #d5d5d5height:75pxwidth:800pxmargin:0 auto 30px-webkit-border-radius: 20px-moz-border-radius:20pxborder-radius: 20px}
.addBarrager input{height:38pxmargin-top:20pxmargin-left:2%width:70%text-indent:30pxborder:noneline-height:38pxfont-size:20px}
.addBarrager .submit{height:38pxbackground:#ffffont-size:20pxfont-family: "微软雅黑"width:25%margin-top:20pxborder-left:1px solid #d5d5d5}
</style>
</head>
<body>
<div class="barrager">
<div><span>我的女神</span></div>
<div><span>温婉而雅</span></div>
<div><span>温柔美丽</span></div>
<div><span>温柔美丽</span></div>
<div><span>温柔美丽</span></div>
<div><span>我最爱的叶老师</span></div>
<div><span>气质型</span></div>
<div><span>风趣幽默</span></div>
<div><span>风趣幽默</span></div>
</div>
<div class="addBarrager clearfix">
<input type="text" maxlength="10" autocomplete="off" class="fl barVal" placeholder="描述你对TA的印象 限10个字">
<button class="submit fr">发布</button>
</div>
<script type="text/javascript">
$(function () {
$(".barrager").barrager()
})
(function () {
var Barrager = function (ele,options) {
var defaults = {
color:["#ff9999","#35d2f4","#9ee353","#9d77ff","#4785d9","#ff9333","#5bdea8","#51befc"],
wrap:ele
}
this.settings = $.extend({},defaults,options||{})
this._init()
this.bindEven()
}
Barrager.prototype = {
_init:function () {
var item = $(this.settings.wrap).find("div")
for(var i = 0i<item.lengthi++){
item.eq(i).css({
top:this.getReandomTop()+"px",
color:this.getReandomColor(),
fontSize:this.getReandomSize()+"px"
})
item.eq(i).css({
right:-item.eq(i).width()
})
}
this.randomTime(0)
},
bindEven:function () {
var _this = this
$(".addBarrager .submit").on('click',function () {
_this._click(_this)
})
},
getReandomColor:function () {
var max = this.settings.color.length
var randomNum = Math.floor(Math.random()*max)
return this.settings.color[randomNum]
},
getReandomTop:function () {
var top = (Math.random()*450).toFixed(1)
return top
},
getReandomSize:function () {
var size = (12+Math.random()*28)
return size
},
getReandomTime:function () {
var time = Math.floor((8+Math.random()*10))
return time*1000
},
randomTime:function (n) {
var obj = $(this.settings.wrap).find("div")
var _this = this
var len = obj.length
if(n>=len){
n=0
}
setTimeout(function () {
n++
_this.randomTime(n)
},1000)
var item = obj.eq(n),_w = item.outerWidth(!0)
item.animate({
left:-_w
},_this.getReandomTime(),"linear",function () {
item.css({right:-_w,left:""})
_this.randomTime(n)
})
},
_click:function (obj) {
var _this = obj
var _val = $(".barVal")
if(_val.val() == ""){
alert("请描述你对TA的印象！")
return false
}
$(_this.settings.wrap).append("<div><span class='new'>"+_val.val()+"</span></div>")
_this._init()
_val.val("")
}
}
$.fn.barrager = function (opt) {
var bger = new Barrager(this,opt)
}
})(jQuery)
</script>
</body>
</html>
