js页面载入特效如何实现
一、总结
一句话总结：可以加选择器（里面的字符串）作为参数，这样函数就可以针对不同选择器，就很棒了。
1、特效的原理是什么？
都是通过标签的位置和样式来实现特效的。
二、js页面载入特效如何实现
1 /* 2 * 1、每种特效分为快中慢（l，m，s） 3 * 2、弄一个随机特效函数random，通过数组实现，也分为快中慢（l，m，s），通过时间参数来实现 4 * */ 5 /******************************1、通用函数******************************/ 6 var speed=new Array(); 7 speed['l']=200; 8 speed['m']=500; 9 speed['s']=800; 10 //alert('11'); 11 //随机特效函数 12 function randomp(width,height,time) { 13 14 } 15 // 16 /******************************2、页面平滑载入函数（slide）******************************/ 17 /* 18 * 1、左上右下 19 * left top right bottom 20 * 2、斜的 21 * leftTop topRight rightBottom bottomLeft 22 * */ 23 24 var slideArr=new Array( 25 'slideLeft', 26 'slideTop', 27 'slideRight', 28 'slideBottom', 29 'slideLeftTop', 30 'slideTopRight', 31 'slideRightBottom', 32 'slideBottomLeft' 33 ); 34 35 function slideRandom_l(width,height,time=speed.l) { 36 slideRandom(width,height,time) 37 // var length=slideArr.length; 38 // var index=Math.floor(Math.random()*length); 39 // var functionName=slideArr[index]; 40 // //alert(functionName); 41 // //alert(functionName+'('+width+','+height+','+time+')') 42 // eval(functionName+'('+width+','+height+','+time+')'); 43 44 } 45 function slideRandom_m(width,height,time=speed.m) { 46 slideRandom(width,height,time) 47 } 48 function slideRandom_s(width,height,time=speed.s) { 49 slideRandom(width,height,time) 50 } 51 52 function slideRandom(width,height,time) { 53 var length=slideArr.length; 54 var index=Math.floor(Math.random()*length); 55 var functionName=slideArr[index]; 56 //alert(functionName); 57 //eval(functionName+'(width,height,time)'); 58 //alert(functionName+'('+width+','+height+','+time+')') 59 eval(functionName+'('+width+','+height+','+time+')'); 60 61 } 62 63 function slideLeft(width,height,time) { 64 $('body').animate({ 65 'left': '-'+width, 66 opacity: '0' 67 }, 0,'linear'); 68 $('body').animate({ 69 'left': '0', 70 opacity: '1' 71 }, time,'linear'); 72 } 73 function slideTop(width,height,time) { 74 $('body').animate({ 75 'top': '-'+height, 76 opacity: '0' 77 }, 0,'linear'); 78 $('body').animate({ 79 'top': '0', 80 opacity: '1' 81 }, time,'linear'); 82 } 83 function slideRight(width,height,time) { 84 $('body').animate({ 85 'left': '+'+width, 86 opacity: '0' 87 }, 0,'linear'); 88 $('body').animate({ 89 'left': '0', 90 opacity: '1' 91 }, time,'linear'); 92 } 93 function slideBottom(width,height,time) { 94 $('body').animate({ 95 'top': '+'+height, 96 opacity: '0' 97 }, 0,'linear'); 98 $('body').animate({ 99 'top': '0',100 opacity: '1'101 }, time,'linear');102 }103 function slideLeftTop(width,height,time) {104 $('body').animate({105 'left': '-'+width,106 'top': '-'+height,107 opacity: '0'108 }, 0,'linear');109 $('body').animate({110 'left': '0',111 'top': '0',112 opacity: '1'113 }, time,'linear');114 }115 function slideTopRight(width,height,time) {116 $('body').animate({117 'left': '+'+width,118 'top': '-'+height,119 opacity: '0'120 }, 0,'linear');121 $('body').animate({122 'left': '0',123 'top': '0',124 opacity: '1'125 }, time,'linear');126 }127 function slideRightBottom(width,height,time) {128 $('body').animate({129 'left': '+'+width,130 'top': '+'+height,131 opacity: '0'132 }, 0,'linear');133 $('body').animate({134 'left': '0',135 'top': '0',136 opacity: '1'137 }, time,'linear');138 }139 function slideBottomLeft(width,height,time) {140 $('body').animate({141 'left': '-'+width,142 'top': '+'+height,143 opacity: '0'144 }, 0,'linear');145 $('body').animate({146 'left': '0',147 'top': '0',148 opacity: '1'149 }, time,'linear');150 }151 152 /******************************3、什么样式（slide）******************************/