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

初学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" οnclick="xx()">
   </div>
</body>
</html>



  • 3
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

zpjshiwo77

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值