jQuery的animate动画效果实现网页弹幕
jQuery的animate动画效果实现网页弹幕炫酷的弹幕评论技术，利用jQuery的animate动画效果实现，文字可以随机变化颜色哦<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Java开发视频弹幕技术SreenText</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="Version-1.0">
<style type="text/css">
*{margin:0;padding:0;}
body{background:#09c;font-size:12px;font-family:"微软雅黑";}
/*screen start*/
#click_screen{width:100px;height:40px;display:block;border:0;text-align:center;line-height:40px;text-decoration:none;font-size:21px;color:#fff;font-family:"微软雅黑";position:absolute;top:20px;left:20px;}
.screen{width:100%;height:100%;position:absolute;left:0;top:0;display:none;}
.screen .s_dm{}
.screen .s_dm .s_close{width:100px;height:40px;display:block;border:0;text-align:center;line-height:40px;text-decoration:none;font-size:21px;color:#c0c0c0;font-family:"微软雅黑";position:absolute;top:20px;right:20px;z-index:3;}
.screen .s_dm .s_close:hover{color:#fff;}
.screen .s_dm .s_show{position:relative;z-index:2;}
.screen .s_dm .s_show div{line-height:36px;font-size:24px;font-weight:bold;position:absolute;top:0;left:0;}
.screen .send{width:100%;height:80px;background:#000;position:absolute;bottom:0;z-index:2;}
.screen .send .s_con{width:100%;height:80px;text-align:center;line-height:80px;}
.screen .send .s_con .s_txt{width:700px;height:40px;border:0;font-size:18px;font-family:"微软雅黑";padding-left:12px;border-radius:3px 0 0 3px;outline:none;}
.screen .send .s_con .s_btn{width:100px;height:40px;background:#088;border:0;font-size:18px;font-family:"微软雅黑";color:#fff;cursor:pointer;border-radius:0 3px 3px 0;outline:none;}
.screen .send .s_con .s_btn:hover{background:#006c6c;}
.screen .s_dm .mask{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:1;}
/*end screen*/
</style>
</head>
<body>
<a href="#" id="click_screen">点击弹幕</a>
<!--screen start-->
<div class="screen">
<!--s_dm start-->
<div class="s_dm">
<a href="#" class="s_close">退出弹幕</a>
<div class="mask"></div>
<div class="s_show">
</div>
</div>
<!--end s_dm-->
<!--send start-->
<div class="send">
<div class="s_con">
<!--两个元素同时使用时，不加回车可以避免两者间的空隙出现-->
<input type="text" class="s_txt"/><input type="button" class="s_btn" value="发表评论"/>
</div>
</div>
<!--end send-->
</div>
<!--end screen-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
//点击展开
$("#click_screen").click(function(){
$(".screen").toggle(600);
});
$(".s_close").click(function(){
$(".screen").toggle(600);
});
//发表评论
$(".s_btn").click(function(){
var text=$(".s_txt").val();
$(".s_show").append("<div>"+text+"</div>");
init_screen();
});
$(".s_txt").keydown(function(){
var code = window.event.keyCode;
//alert(code);
if(code == 13)//回车键按下时，输出到弹幕
{
var text=$(".s_txt").val();
$(".s_show").append("<div>"+text+"</div>");
init_screen();
}
});
});
//初始化弹幕
function init_screen(){
var _top=0;
$(".s_show").find("div").show().each(function(){
var _left=$(window).width()-$(this).width();
var _height=$(window).height();
_top=_top+80;
if(_top>_height-100){
_top=80;
}
var time=10000;
if($(this).index()%2==0){
time=20000;
}
//设定文字的初始化位置
$(this).css({left:_left,top:_top,color:getRandomColor()});
$(this).animate({left:"-"+_left+"px"},time,function(){
});
});
}
//随机获取颜色值
function getRandomColor(){
return '#'+(function(h){
return new Array(7-h.length).join("0")+h
})((Math.random()*0x1000000<<0).toString(16))
}
</script>
</body>
</html>
页:
[1]