jQuery模擬黑客帝國矩陣效果實例
更新時間：2015年06月28日 10:58:45 作者：廢柴大叔
這篇文章主要介紹了jQuery模擬黑客帝國矩陣效果的方法,實例分析了jQuery操作頁面元素實現(xiàn)動畫效果的技巧,需要的朋友可以參考下
本文實例講述了jQuery模擬黑客帝國矩陣效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
html部分如下：
<div id="container">
<div style="width:10px; word-break :break-all">
10001001110010010010000
</div>
<div style="width:10px; word-break :break-all;margin-left:30px">
the answer is in your mind
</div>
</div>
css部分如下：
#container div{padding:10px;position:absolute;border:0px dotted brown;width:0px;color:green;text-shadow: 1px 1px 3px #cccccc;}
.text{padding:10px;color:#ccc;}
#panel{width:400px;margin:0 auto;color:white;margin-top:20%;font-size:15px;font-weight:bold;z-index:99999;background:black;}
js部分如下：
$(function() {
for (var i = 0; i < 3; i++) $('div', '#container').clone().prependTo('#container');
//克隆一遍增加數(shù)據(jù)
range();
setInterval(drop, 150); //速度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"});
//停在當前位置不讓繼續(xù)從上往下掉
$(this).css({
"top": -5 * rnd + "px"
}); //從頂部以上開始
}
});
}
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
這篇文章主要介紹了jQuery實現(xiàn)點擊圖片翻頁展示效果的方法,涉及jQuery操作圖片的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
jquery實現(xiàn)兼容瀏覽器的圖片上傳本地預覽功能
圖片上傳本地預覽功能代碼在網(wǎng)上可以搜索很多，但同時可以兼容瀏覽器的話就多了，本文有個不錯的示例，感興趣的朋友可以參考下2013-10-10
這篇文章主要為大家詳細介紹了jQuery基本篩選選擇器實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細介紹了jquery實現(xiàn)左右輪播圖效果，經常用于購物網(wǎng)站的首頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
在用jquery的each做循環(huán)遍歷的時候常常會使用到this，要使用jquery的方法 前提此對象必須是jquery對象，下面為大家介紹下jquery對象的判斷方法2014-03-03
下面小編就為大家?guī)硪黄猨query實現(xiàn)下拉框功能效果【實例代碼】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05
這篇文章主要介紹了jQuery子屬性過濾選擇器用法,實例分析了:first-child、:last-child、:nth-child、:only-chilid等子屬性過濾選擇器使用技巧,需要的朋友可以參考下2015-02-02
最近因為項目的需要，使用了一個JQuery插件。把插件下下來后，很快我就發(fā)現(xiàn)，很多默認的插件Style不符合項目要求，必須要被修改2012-05-05
這篇文章主要介紹了HTML頁面如何彈出居中可拖拽的自定義窗口層,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了Jquery實現(xiàn)瀑布流布局的方法,可實現(xiàn)圖片的動態(tài)加載功能,且代碼備有詳細注釋便于理解,需要的朋友可以參考下2015-07-07