微信扫一扫打赏支持

js页面载入特效如何实现

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

 

 

 

 
posted @ 2018-07-02 14:50  范仁义  阅读(1786)  评论(0)  编辑  收藏  举报