设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 1723|回复: 0

[jQuery/Js/AJAX] jQuery的animate动画效果实现网页弹幕

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2015-4-13 23:51:20 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
jQuery的animate动画效果实现网页弹幕

  炫酷的弹幕评论技术,利用jQuery的animate动画效果实现,文字可以随机变化颜色哦
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.                 <title>Java开发视频弹幕技术SreenText</title>
  6.                 <meta name="Keywords" content="关键词,关键词">
  7.                 <meta name="description" content="Version-1.0">
  8.                 <style type="text/css">
  9.                         *{margin:0;padding:0;}
  10.                         body{background:#09c;font-size:12px;font-family:"微软雅黑";}
  11.                         /*screen start*/
  12.                         #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;}
  13.                         .screen{width:100%;height:100%;position:absolute;left:0;top:0;display:none;}
  14.                         .screen .s_dm{}
  15.                         .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;}       
  16.                         .screen .s_dm .s_close:hover{color:#fff;}
  17.                         .screen .s_dm .s_show{position:relative;z-index:2;}
  18.                         .screen .s_dm .s_show div{line-height:36px;font-size:24px;font-weight:bold;position:absolute;top:0;left:0;}
  19.                         .screen .send{width:100%;height:80px;background:#000;position:absolute;bottom:0;z-index:2;}
  20.                         .screen .send .s_con{width:100%;height:80px;text-align:center;line-height:80px;}
  21.                         .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;}
  22.                         .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;}
  23.                         .screen .send .s_con .s_btn:hover{background:#006c6c;}
  24.                         .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;}
  25.                         /*end screen*/
  26.                 </style>
  27.         </head>

  28. <body>
  29.         <a href="#" id="click_screen">点击弹幕</a>
  30.         <!--screen start-->
  31.         <div class="screen">
  32.                 <!--s_dm start-->
  33.                 <div class="s_dm">
  34.                         <a href="#" class="s_close">退出弹幕</a>
  35.                         <div class="mask"></div>
  36.                         <div class="s_show">
  37.                                
  38.                         </div>
  39.                 </div>
  40.                 <!--end s_dm-->
  41.                 <!--send start-->
  42.                 <div class="send">
  43.                         <div class="s_con">
  44.                                 <!--两个元素同时使用时,不加回车可以避免两者间的空隙出现-->
  45.                                 <input type="text" class="s_txt"/><input type="button" class="s_btn" value="发表评论"/>
  46.                         </div>
  47.                 </div>
  48.                 <!--end send-->
  49.         </div>
  50.         <!--end screen-->

  51. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  52. <script type="text/javascript">
  53.         $(function(){

  54.                
  55.                 //点击展开
  56.                 $("#click_screen").click(function(){
  57.                         $(".screen").toggle(600);
  58.                        
  59.                 });
  60.                 $(".s_close").click(function(){
  61.                         $(".screen").toggle(600);
  62.                        
  63.                 });
  64.                
  65.                 //发表评论
  66.                 $(".s_btn").click(function(){
  67.                         var text=$(".s_txt").val();
  68.                         $(".s_show").append("<div>"+text+"</div>");
  69.                         init_screen();
  70.                 });

  71.                 $(".s_txt").keydown(function(){
  72.                         var code = window.event.keyCode;

  73.                         //alert(code);

  74.                         if(code == 13)//回车键按下时,输出到弹幕

  75.                         {
  76.                                 var text=$(".s_txt").val();
  77.                                 $(".s_show").append("<div>"+text+"</div>");
  78.                                 init_screen();
  79.                         }
  80.                 });
  81.                
  82.         });
  83.        
  84.         //初始化弹幕
  85.         function init_screen(){
  86.                 var _top=0;

  87.                 $(".s_show").find("div").show().each(function(){
  88.                         var _left=$(window).width()-$(this).width();
  89.                         var _height=$(window).height();
  90.                        
  91.                         _top=_top+80;

  92.                         if(_top>_height-100){
  93.                                 _top=80;
  94.                         }
  95.                
  96.                         var time=10000;
  97.                         if($(this).index()%2==0){
  98.                                 time=20000;
  99.                         }
  100.                         //设定文字的初始化位置
  101.                         $(this).css({left:_left,top:_top,color:getRandomColor()});
  102.                         $(this).animate({left:"-"+_left+"px"},time,function(){
  103.                                
  104.                         });


  105.                 });
  106.         }

  107.         //随机获取颜色值
  108.         function getRandomColor(){
  109.                 return '#'+(function(h){
  110.                         return new Array(7-h.length).join("0")+h
  111.                 })((Math.random()*0x1000000<<0).toString(16))
  112.         }

  113. </script>
  114. </body>
  115. </html>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:28

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表