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）******************************/