你在这儿: 首页>严肃的

用jQuery写的下雨特效,矩阵 Matrix!

来源:锋迷全球   时间: 2011-05-25   浏览次数:0

以前看黑帝帝国不是有一串串的代码从后面落下来吗?就是模仿那个的...原理:控制div的y轴,让其随机增加,达到降落的效果,到底部的时候又重新开始。代码如下,保存为xxx.html就可以了。


下雨特效效果图
 

以前看黑帝帝国不是有一串串的代码从后面落下来吗?就是模仿那个的,话说黑客帝国我看了一点还没看完,以后有兴趣再看下了。原理:控制div的y轴,让其随机增加,达到降落的效果,到底部的时候又重新开始。
代码如下,保存为xxx.html就可以了。
纯字的话感觉效果不是很明显,所以我加了很多竖线进去。如果还觉得不明显,请打开站在三米外观看。

________________________________________________________________________________________________

<html>
<head>
<title> jQuery Matrix下雨特效</title>
<style type="text/css">
body{padding:0px;margin:0px;font-size:12px;overflow:hidden;background:#000;}
#container div{padding:10px;position:absolute;border:0px dotted brown;width:0px;color:#FF0000;cursor:pointer;}
.text{padding:10px;color:#ccc;}
</style>

<script type="text/javascript" src="http://www.cozof.com/images/js/jquery.min.1.5.js"></script>
<script type="text/javascript">
/*
*code by 锋迷全球
*2011/5/24
*/
$(function()
{  
 $('div','#container').clone().prependTo('#container');//克隆一遍增加数据
 $('div','#container').mousemove(function(e)
 {
  var ex = e.clientX;//鼠标x坐标
  var ey = e.clientY;
  $(this).css({"left":(ex-20) +"px","top":(ey-20) +"px"});
 });

  range();
  setInterval(drop,150);
});

//排列
function range()
{
 var num = 1;
 $('div','#container').each(function(i)
 {
  var ww = $(window).width();//窗口宽度
  var wh = $(window).height();
  var ol = $(this).offset().left;//距左边像素
  var ot = -20;//$(this).offset().top;//从头部以上开始
  
  i++;
  if(i%22==0) num=1; //22个一排
  $(this).css({"left":(ol+ num*60) +"px","top":(ot + Math.ceil(i/2)*30)+"px"});//距左距离保持,距上距离变化
  num ++;
 });
}

//降落
function drop()
{
 $('div','#container').each(function(i)
 {
  var wh   = $(window).height();
  var ol   = $(this).offset().left;
  var ot   = $(this).offset().top;
  var rnd  = Math.round(Math.random()*100);
  var rnd2 = Math.round(Math.random()*50);
  //i = i == 0 ? 0.5 : i;
  $(this).css({"top":(ot+rnd+rnd2) +"px"});//降落的速度
  if(ot>=wh)//如果掉到窗口以下
  {   
   //$(this).css({"top":wh-20 +"px"});//停在当前位置不让继续从上往下掉
   $(this).css({"top":-5*rnd +"px"});//从顶部以上开始
  }
 });
}
</script>
</head>
<body>
<!--begin-->
<div id="container">

<div>天</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>行</div>
<div>健</div>
<div>君</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>子</div>

<div>以</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>自</div>
<div>强</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>不</div>

<div>息</div>

<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>地</div>
<div>势</div>
<div>坤</div>

<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>君</div>
<div>子</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>以</div>

<div>厚</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>德</div>
<div>载</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>物</div>


<div>天</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>行</div>
<div>健</div>
<div>君</div>

<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>子</div>
<div>以</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>自</div>

<div>强</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>不</div>
<div>息</div>

<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>地</div>

<div>势</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>坤</div>
<div>君</div>
<div>子</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>以</div>

<div>厚</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>德</div>
<div>载</div>
<div>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>物</div>

 

</div>
<!--end-->

</body>

</html>

 

________________________________________________________________________________________________

演示地址:点此打开 (北方用户访问不了?)


 

 本文链接:http://www.cozof.com/show/22.shtml   [复制] [收藏]
----------------------------------------------------------------------------------------------------------------------------
分享本文到:
更多
----------------------------------------------------------------------------------------------------------------------------
关键词:jQuery  下雨  特效阵  Matrix!  
你可能还感兴趣的:

----------------------------------------------------------------------------------------------------------------------------
已有0位网友发表了看法
  • 用户名:
  • 内  容:
  • 验证码:
    点击换一张

最新

津巴布韦选丑大赛 众多男子角逐
哈尔滨佛学院正式成立了!
英国军情六处:007情商太低 现实
世界上10个最戒备森严的地方
丑是好的至少你知道大家是因为你
比尔·盖茨豪宅,参观1次3.5万美元
林肯的小趣事
替补登场9分钟5球创世界纪录——

推荐

能认出5字以上就是绝对是高手!
世界上最好的10支特种部队,GIS特
谷歌变身子公司,成立母公司Alphab
鲁迅其实还是一名资深设计师
美国在国际奥数比赛中“破天荒”
关于性吸引的5个真相
不会死的生物:美洲龙虾、刺果松、
五十大最佳发明之激光打蚊子

最热门

为什么百度腾讯阿里巴巴等要在开
检测JSON代码合法性,JSON格式化
如何取消驱动精灵开机启动
15款Android(安卓)下常用有趣有
求种子地址!
firefox(火狐)如何像ie一样显示j
你们这帮混蛋,鲁迅到底是谁,原名冰
法克.尤尔.马泽尔 百科恶搞

随机

那些掉去的头发,程序员到底怎么
吉它神童!最小的吉它弹奏者!震惊![
我是怎么做开源的
如何让MySQL可以远程登录
女司机也大怒:我看你他妈从哪儿掏
乔布斯的遗作:维纳斯游艇
《时代周刊》2015年全球最具影响
非我"寞"属---节操丧尽的一台晚

最近浏览

   清除记录

联系

合  作: [email protected] [复制]
服  务: [email protected] [复制]
投  稿: [email protected] [复制]
不  解: [email protected] [复制]

cozof qr code
手机访问:www.cozof.com/wap/

这是什么