jQuery模仿一个掉落结果，本性网页代码

发布时间：2018-08-13 13:37:04 所属栏目：运营来源：站长网

导读：模仿了一个掉落结果，不知道其余赏识器什么结果，横竖在 IE8 下正常表现。运行结果后，可看到字符中从空中掉落，很牛很酷的结果吧，行使了 jQuery 插件，引自猛火学院。为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新

　　模仿了一个掉落结果，不知道其余赏识器什么结果，横竖在IE8下正常表现。运行结果后，可看到字符中从空中掉落，很牛很酷的结果吧，行使了jQuery插件，引自猛火学院。

　　为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增网页版演示。

　　点击查察：网页殊效

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title>Js模仿了一个掉落结果</title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <style type="text/css"> .canvas{ width:500px; height:500px; position:relative; } </style> </head> <body> <div> <input type="button" onclick="javascript:falling.init();" value="GO" /> </div> <div class="canvas" id="canvas"></div> <script type="text/javascript"> /* *坠落结果 */ function Falling(){ this.dict=["abcd","less","than","that","absolute","relative","my","index","html","java","c#","web","javascript","php","include","shit","bull","big","smart","call","apply","callee","caller","function"]; this.canvas=$("#canvas"); this.step=15; this.freq=10; this.height=500; this.width=500; this.si=null; } Falling.prototype={ fallingAction:function(dom){ var self=this; var freqs=[10,15,20];//每次着落的间隔 var disS=[];//记录全部dom的当前间隔 var disPerFreqS=[];//每个dom的 var targetDis=500; var domCssTopS=[];//全部dom的top属性 var successDom=[];//记录哪些dom已经竣事<b>行为</b> var successCount=0;//有几多个dom已经竣事 var total=dom.length; var freqMarkLength=freqs.length; for(var i=0,j=dom.length;i<j;i++){ domCssTopS[i]=dom[i].position().top; disS[i]=0; disPerFreqS[i]=freqs[parseInt(Math.random()*freqMarkLength)]; } self.si=setInterval(function(){ if(successCount>=total){ clearInterval(self.si); } for(var i=0,j=dom.length;i<j;i++){ if(typeof(successDom[i])!="undefined" && successDom[i]=="ok"){ continue; } disS[i] += disPerFreqS[i]; if(disS[i] >= targetDis){ dom[i].css("top", targetDis+domCssTopS[i]); successDom[i]="ok"; successCount++;; }else{ dom[i].css("top", disS[i]+domCssTopS[i]); } } },self.freq); }, init:function(){ var self=this; self.canvas.html(''); var dom=[]; var l=0; var t=0; var tempDom=$("<div style='position;absolute;left:-100000;visibility:hidden'></div>").appendTo($("body")); for(var i=0,j=self.dict.length;i<j;i++){ dom[i]=$("<span style='position:absolute'>"+self.dict[i]+"</span>").appendTo(tempDom); var domWidth=dom[i].width(); var domHeight=dom[i].height(); if(t<self.height){ if(l<self.width){ if(domWidth+l<=self.width){ dom[i].css({"top":t,"left":l}); self.canvas.append(dom[i]); l += dom[i].width(); }else{ if(domHeight+t<=self.height){ t=t+domHeight; dom[i].css({"top":t,"left":0}); self.canvas.append(dom[i]); l = dom[i].width(); }else{ break;//到极限了 } } }else{ if(domHeight+t<=self.height){ t=t+domHeight; l=0; dom[i].css({"top":t,"left":l}); self.canvas.append(dom[i]); }else{ break;//到极限了 } } }//else极限 } self.fallingAction(dom); } } var falling=new Falling(); falling.init(); </script> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

等等党又赢了，iPhone	450W高功耗卡皇名不虚
群联 PCIe 5.0 SSD一定	微星Modern 14 15笔记