js實現的加分後出現漸隱提示效果
現在很多網站一些功能都有這樣的效果,那就是會出現一個會漸隱的提示框效果。
比如本站每天登陸的時候會有一個積分增加的提示框效果,然後這個提示框出現後漸隱消失。
下面就通過程式碼例項介紹一下如何實現類似的功能。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> var x=window.x||{}; x.creat=function(t,b,c,d){ this.t=t; this.b=b; this.c=c; this.d=d; this.op=1; this.div=document.createElement("div"); this.div.style.height="40px"; this.div.style.width="100px"; this.div.style.background="red"; this.div.style.position="absolute"; this.div.style.left="50%"; this.div.style.marginLeft="-50px" this.div.style.marginTop="-20px" this.div.innerText="經驗值加一" this.div.style.fontSize="12" this.div.style.lineHeight=this.div.style.height this.div.style.textAlign="center"; this.div.style.fontWeight="bold"; this.div.style.color="#fff" this.div.style.top=(this.b+"%"); document.body.appendChild(this.div); this.run(); } x.creat.prototype={ run:function(){ var me=this; this.div.style.top=-this.c*(this.t/this.d)*(this.t/this.d)+this.b+"%"; this.t++; this.q=setTimeout(function(){me.run()},25) if(this.t==this.d){ clearTimeout(me.q); setTimeout(function(){me.alpha();},1000); } }, alpha:function(){ var me=this; if("\v"=="v"){ this.div.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+this.op*100+")"; this.div.style.filter="alpha(opacity="+this.op*100+")"; } else{ this.div.style.opacity=this.op } this.op-=0.02; this.w=setTimeout(function(){me.alpha()},25) if(this.op<=0){ clearTimeout(this.w); document.body.removeChild(me.div); } } } window.onload=function(){ new x.creat(1,50,25,30); } </script> </head> <body> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
相關文章
- css3實現的文字顏色漸變和漸隱效果CSSS3
- Qt實現控制元件的漸隱漸現動效QT控制元件
- css3網頁底部漸隱漸現的箭頭效果CSSS3網頁
- CSS3圓形漸隱漸現迴圈出現CSSS3
- js實現的密碼強度提示效果JS密碼
- 短視訊直播原始碼,實現頂部導航欄背景圖片漸隱漸現效果原始碼
- 點選實現元素的漸隱或者漸現程式碼例項
- Dreamweaver網頁元素怎麼製作漸隱漸現效果教程網頁
- css3迴圈漸隱漸現效果程式碼例項CSSS3
- html實現的滑鼠放在連結上出現文字提示效果HTML
- 為app實現漸變的遮罩效果APP遮罩
- jQuery實現的滑鼠滑過連結出現自定義提示效果jQuery
- 用VC 實現圖象漸顯和漸隱 (轉)
- canvas繪製小球漸隱漸現Canvas
- 利用jQuery實現頁面漸顯效果jQuery
- jquery漸隱漸現程式碼例項jQuery
- js實現打字效果JS
- js實現彈出層滑鼠跟隨效果JS
- html + css + js 原生 彈出提示框的實現HTMLCSSJS
- 用Visual C++實現圖象漸顯和漸隱 (轉)C++
- jquery實現的具有漸變效果的圖片切換jQuery
- javascript 玫瑰花漸現效果JavaScript
- js實現的點選一個div顯示,其他div隱藏效果JS
- jQuery 實現顯示與隱藏效果jQuery
- js實現的文字框輸入內容自動提示效果程式碼JS
- 循序漸進的用js實現一個bind()JS
- jquery模擬實現的連結title提示效果jQuery
- 實現爆炸後的振動效果 (轉)
- CSS + JS 實現打字機效果CSSJS
- JS和Css實現紅包雨的效果JSCSS
- 那些不用js也能實現的效果JS
- 原生JS實現輪播圖的效果JS
- 當滑鼠放在連線上出現提示框效果
- jquery實現的元素以動畫方式移動和漸變效果jQuery動畫
- javascript實現的點選當前元素隱藏效果JavaScript
- 實現textarea文字框多行提示文字效果
- css3實現的具有漸變效果的選項卡功能CSSS3
- JS實現馬賽克圖片效果JS