代码分享：宠物小精灵开场特效

来源：互联网发布：c语言数据结构源代码编辑：程序博客网时间：2024/04/27 15:55

初学JS，自己尝试着写一些特效。这算是自己学了JS半个月以来第一次完全自己写的，瑕疵也有一点（main只能是正方形，且宽，高度最好是20的倍数，不然会不好看）。喜欢的朋友可以拿去用了~

一共有三种版本：

第一种的是方块按对角线消失：

var Start = (function($){    function start(o){        this.creat(o);    };    start.prototype = {        creat: function (o){            var size=$(o).height();            var sizeMin=size/20;            for(var i=0;i<400;i++){                $(o).append("<div class='min'></div>");            }            $(".min").css({"display":"inline-block","height":sizeMin+"px","width":sizeMin+"px","float":"left","background-color":"black","transition":"opacity 1.2s","-moz-transition":"opacity 1.2s","-webkit-transition":"opacity 1.2s","-o-transition":"opacity 1.2s"});            this.gone(o);        },        gone: function(o){            var childs = $(o).children();            var count=0;            var i=0;            var child = new Array();            for (var k = 0; k < 20; k++) {                child[k] = new Array();                for (var j = 0; j <20; j++) {                    child[k][j]=childs[i];                    i++;                };            };            function change(){                for ( i = 0; i <count; i++) {                    for (var j = 0; j <count; j++) {                        if(i+j<=count&&i<20&&j<20){$(child[i][j]).css("opacity","0");}                    };                                   };                               if(count<55){t=setTimeout(change,50)}                if(count==55){$(o).empty();}                count++;            }            (function(){                change();            }());        },    }    return {        set: function(o){            new start(o)        }    }})(jQuery)

第二种是方块按正方形消失：

var Start = (function($){function start(o){this.creat(o);};start.prototype = {creat: function (o){var size=$(o).height();var sizeMin=size/20;for(var i=0;i<400;i++){        $(o).append("<div class='min'></div>");    }    $(".min").css({"display":"inline-block","height":sizeMin+"px","width":sizeMin+"px","float":"left","background-color":"black","transition":"opacity 1.2s","-moz-transition":"opacity 1.2s","-webkit-transition":"opacity 1.2s","-o-transition":"opacity 1.2s"});    this.gone(o);},gone: function(o){var childs = $(o).children();var count=-1;var count2=20;var i=0;var child = new Array();for (var k = 0; k < 20; k++) {child[k] = new Array();for (var j = 0; j <20; j++) {child[k][j]=childs[i];i++;};};function change(){for ( i = 0; i <20; i++) {if(count2<20&&count>=0&&count2>0){$(child[count][i]).css("opacity","0");$(child[i][count]).css("opacity","0");$(child[i][count2]).css("opacity","0");$(child[count2][i]).css("opacity","0");}};if(count<20){t=setTimeout(change,100)}if(count==20){$(o).empty();}count++;count2--;}(function(){change();}());},}return {set: function(o){new start(o)}}})(jQuery)

第三种是方块随机消失：

var Start = (function($){function start(o){this.creat(o);};start.prototype = {creat: function (o){var size=$(o).height();var sizeMin=size/20;for(var i=0;i<400;i++){        $(o).append("<div class='min'></div>");    }    $(".min").css({"display":"inline-block","height":sizeMin+"px","width":sizeMin+"px","float":"left","background-color":"black","transition":"opacity 0.5s","-moz-transition":"opacity 0.5s","-webkit-transition":"opacity 0.5s","-o-transition":"opacity 0.5s"});    this.gone(o);},gone: function(o){var childs = $(o).children();var count=0;var i=0;var myAr=new Array();var tm;var child = new Array();for (var k = 0; k < 20; k++) {child[k] = new Array();for (var j = 0; j <20; j++) {child[k][j]=childs[i];i++;};};function change(){if(count>0){miss();while($.inArray(tm,myAr)!=-1){miss();if(myAr.length>399){break;}console.log(1);}if($.inArray(tm,myAr)==-1){myAr.push(tm)}}function miss(){var x=Math.floor(Math.random()*20);        var y=Math.floor(Math.random()*20);        $(child[x][y]).css("opacity","0");        tm=x+"i"+y;}if(count<600){t=setTimeout(change,4)}if(count==600){$(o).empty();}count++;}(function(){change();}());},}return {set: function(o){new start(o)}}})(jQuery)

然后是调用方法：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <script type="text/javascript" src="jquery-2.1.4.js"></script>    <script type="text/javascript" src="StartShow.js"></script>    <style type="text/css">    .main{        height: 500px;        width: 500px;        border:2px red solid;        background-color: yellow;    }    </style>    <script type="text/javascript">        function xx(){            var x=$(".main");            Start.set(x);         }   </script></head><body>   <div class="main" onclick="xx()">   </div></body></html>

1 0