HTML代码:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS代码：
#wrapper .text {
position:relative
bottom:30px
left:0px
visibility:hidden
}
#wrapper:hover .text {
visibility:visible
}
随便写了一个，应该差不多。喜欢的话就参考一下
<!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>
<input id="test">提交</input>//提交按钮<script type="text/javascript">
$("#test").click(function () {//点击事件
alert("hello,world!")//弹出的内容
})
</script >
