[jquery选择器]JQuery实现―黑客帝国代码下落特效

【www.bbyears.com--jquery】

下面通过两个小例子，一步一步来实现：

第一个：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>




   
   
        Please Upgrade your browser
   
   

    puse
    run
   
    <script type="text/javascript">
        $(document).ready(function() {
        /*
            var c2 = document.getElementById("myCanvasMatrix");
            var ctx2 = c2.getContext("2d");
            其中 'ctx2' 就等同于下面的 'ctx1'
        */
        var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");
        /*
            其中$("").get(0)表示获取内部的DOM对象引用
            也就是：获取到对象的dom对象后就可以使用对应的dom API
        */
        /*
            getContext() 方法返回一个用于在画布上绘图的环境。
            Canvas.getContext(contextID);
            其中contextID参数当前唯一的合法值为'2d'，也就是支持了二维绘图
            未来可能会支持'3d'这个参数哦~
        */
        var Matrix=function(){
            /*
                var my_gradient=ctx1.createLinearGradient(0,0,0,170);
                my_gradient.addColorStop(0,"black");
                my_gradient.addColorStop(1,"white");
                ctx1.fillStyle=my_gradient;
            */
            ctx1.fillStyle = 'rgba(0,0,0,.07)';
            /*
                fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
                rgba(R,G,B,A)
                其中'.05'代表阿尔法透明度
            */
            ctx1.fillRect(0,0,500,500);
            /*
                fillRect() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形
            */
            ctx1.fillStyle = "#0f0";
            ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500));
            ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500));
            /*
                其原理就是不停的产生新的有透明度的背景和要显示的内容，
                这样新的背景不停的覆盖旧的显示内容
                新的内容就突显了出来
            */
        };
        runFun();
        var id;
        function stopFun(){
            clearInterval(id);
        }
        function runFun(){
            id = setInterval(Matrix,50);
        /*
           setInterval() 定义和用法:
           setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
           setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
        */
        }
        $("button#puse").click(function() {
            stopFun();
        });
        $("button#run").click(function() {
            runFun();
        });
    });
    </script>



 
第二个：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
    type="text/javascript"></script>



   
       
            Your browser does not support the HTML5 canvas tag.
       
    <script type="text/javascript">
        var YPositions= Array(51).join(0).split('');
        /*
            join() 方法用于把数组中的所有元素放入一个字符串
            split() 方法用于把一个字符串分割成字符串数组
        */
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var draw=function(){
            ctx.fillStyle='rgba(0,0,0,.05)';
            ctx.fillRect(0,0,500,500); ctx.fillStyle="#0f0";
            YPositions.map(function(y,index){
            /*
                map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象
            */
                x = (index*10);
                ctx.fillText(parseInt(Math.random()*10), x, y);
            /*
                在(x,y)坐标位产生一个'a'字符
                index为Ypositions的下标
            */
                if(y>500) {
                    YPositions[index]=0;
                } else {
                    YPositions[index]=y+10;
                }
            /*
                如果新产生的字符已经到了的辩解
                那么就使产生下一个新字符的位置回归到原点
             */
            });
        };
        setInterval(draw,30);
    </script>

jQuery模拟黑客帝国矩阵效果


   
        10001001110010010010000
   
   
        the answer is in your mind
   


#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;}

$(function() {
    for (var i = 0; i < 3; i++) $('div', '#container').clone().prependTo('#container'); //克隆一遍增加数据
    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"});//停在当前位置不让继续从上往下掉
            $(this).css({
                "top": -5 * rnd + "px"
            }); //从顶部以上开始
        }
    });
}

本文来源：http://www.bbyears.com/wangyezhizuo/89590.html