注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

vingo

日月

 
 
 

日志

 
 
 
 

css3 html5 无插件 弹幕  

2015-12-25 14:08:49|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>弹幕</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no"/>
<style>
.divAn {
opacity: 0;
position: absolute;
animation: myfirst 2s linear 0s 1 normal; /* Safari 和 Chrome: */
-moz-animation: myfirst 2s linear 0s 1 normal; /* Firefox: */
-webkit-animation: myfirst 2s linear 0s 1 normal; /* Safari 和 Chrome: */
-o-animation: myfirst 2s linear 0s 1 normal; /* Opera: */
}

@keyframes myfirst {
0% {
opacity: 0;
left: 80%;
}
50% {
opacity: 1;
left: 40%;
}
100% {
opacity: 0;
left: 0px;
visibility: hidden;
}
}

</style>
</head>
<body>
<div id="in" style="background-color: #00AA88;height: 300px">
<div class="divAn" style="top:5px;">777</div>
<div class="divAn" style="top:30px;">0000</div>
<div class="divAn" style="top:100px;">888</div>
</div>
<br>
<div style="text-align: center">
<input type="text" id="textT" value="我是弹幕">
<input type="button" onclick="javascript:send()" value="send" style="top: 100px;">
</div>
</body>

<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="application/javascript">
function send() {
var s = randomBy(5, 200);
var idNumber = Date.parse(new Date());
var alertString = '<div class="divAn" style="top:' + s + 'px;" id="' + idNumber + '">' + $("#textT").val() + '</div>';
$("#in").append(alertString);
window.setTimeout(function () {
$("#" + idNumber).remove();
}, 2000);
}
function randomBy(under, over) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * under + 1);
case 2:
return parseInt(Math.random() * (over - under + 1) + under);
default:
return 0;
}
}
</script>
</html>
  评论这张
 
阅读(2)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017