js页面载入特效如何实现

js页面载入特效如何实现

一、总结

一句话总结：可以加选择器（里面的字符串）作为参数，这样函数就可以针对不同选择器，就很棒了。

1、特效的原理是什么？

都是通过标签的位置和样式来实现特效的。

二、js页面载入特效如何实现

 /*
 * 1、每种特效分为快中慢（l，m，s）
 * 2、弄一个随机特效函数random，通过数组实现，也分为快中慢（l，m，s），通过时间参数来实现
 * */
 /******************************1、通用函数******************************/
 var speed=new Array();
 speed['l']=200;
 speed['m']=500;
 speed['s']=800;
 //alert('11');
 //随机特效函数
 function randomp(width,height,time) {

 }
 //
 /******************************2、页面平滑载入函数（slide）******************************/
 /*
 * 1、左上右下
 * left top right bottom
 * 2、斜的
 * leftTop topRight rightBottom bottomLeft
 * */

 var slideArr=new Array(
     'slideLeft',
     'slideTop',
     'slideRight',
     'slideBottom',
     'slideLeftTop',
     'slideTopRight',
     'slideRightBottom',
     'slideBottomLeft'
 );

 function slideRandom_l(width,height,time=speed.l) {
     slideRandom(width,height,time)
     // var length=slideArr.length;
     // var index=Math.floor(Math.random()*length);
     // var functionName=slideArr[index];
     // //alert(functionName);
     // //alert(functionName+'('+width+','+height+','+time+')')
     // eval(functionName+'('+width+','+height+','+time+')');

 }
 function slideRandom_m(width,height,time=speed.m) {
     slideRandom(width,height,time)
 }
 function slideRandom_s(width,height,time=speed.s) {
     slideRandom(width,height,time)
 }

 function slideRandom(width,height,time) {
     var length=slideArr.length;
     var index=Math.floor(Math.random()*length);
     var functionName=slideArr[index];
     //alert(functionName);
     //eval(functionName+'(width,height,time)');
     //alert(functionName+'('+width+','+height+','+time+')')
     eval(functionName+'('+width+','+height+','+time+')');

 }

 function slideLeft(width,height,time) {
     $('body').animate({
         'left': '-'+width,
         opacity: '0'
     }, 0,'linear');
     $('body').animate({
         'left': '0',
         opacity: '1'
     }, time,'linear');
 }
 function slideTop(width,height,time) {
     $('body').animate({
         'top': '-'+height,
         opacity: '0'
     }, 0,'linear');
     $('body').animate({
         'top': '0',
         opacity: '1'
     }, time,'linear');
 }
 function slideRight(width,height,time) {
     $('body').animate({
         'left': '+'+width,
         opacity: '0'
     }, 0,'linear');
     $('body').animate({
         'left': '0',
         opacity: '1'
     }, time,'linear');
 }
 function slideBottom(width,height,time) {
     $('body').animate({
         'top': '+'+height,
         opacity: '0'
     }, 0,'linear');
     $('body').animate({
         'top': '0',
         opacity: '1'
     }, time,'linear');
 }
 function slideLeftTop(width,height,time) {
     $('body').animate({
         'left': '-'+width,
         'top': '-'+height,
         opacity: '0'
     }, 0,'linear');
     $('body').animate({
         'left': '0',
         'top': '0',
         opacity: '1'
     }, time,'linear');
 }
 function slideTopRight(width,height,time) {
     $('body').animate({
         'left': '+'+width,
         'top': '-'+height,
         opacity: '0'
     }, 0,'linear');
     $('body').animate({
         'left': '0',
         'top': '0',
         opacity: '1'
     }, time,'linear');
 }
 function slideRightBottom(width,height,time) {
     $('body').animate({
         'left': '+'+width,
         'top': '+'+height,
         opacity: '0'
     }, 0,'linear');
     $('body').animate({
         'left': '0',
         'top': '0',
         opacity: '1'
     }, time,'linear');
 }
 function slideBottomLeft(width,height,time) {
     $('body').animate({
         'left': '-'+width,
         'top': '+'+height,
         opacity: '0'
     }, 0,'linear');
     $('body').animate({
         'left': '0',
         'top': '0',
         opacity: '1'
     }, time,'linear');
 }

 /******************************3、什么样式（slide）******************************/