JS實現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法
更新時間：2015年02月23日 10:45:50 作者：代碼家園
這篇文章主要介紹了JS實現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法,實例分析了javascript彈出特效的css與提示框的具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS仿中關(guān)村論壇評分后彈出提示的效果</title>
</head>
<body>
<script language="javascript">
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="謝謝參與！經(jīng)驗+5"
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.border="solid red 1px";
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);
}
}
}
new x.creat(1,50,25,30);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS仿中關(guān)村論壇評分后彈出提示的效果</title>
</head>
<body>
<script language="javascript">
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="謝謝參與！經(jīng)驗+5"
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.border="solid red 1px";
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);
}
}
}
new x.creat(1,50,25,30);
</script>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript封閉函數(shù)及常用內(nèi)置對象示例
這篇文章主要介紹了JavaScript封閉函數(shù)及常用內(nèi)置對象,結(jié)合實例形式分析了JavaScript封閉函數(shù)及常用內(nèi)置對象的定義與簡單使用相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了js 計算月/周的第一天和最后一天代碼,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了JavaScript中的邏輯判斷符&&、||與!介紹,本文講解了邏輯與&&的處理規(guī)則、邏輯或||的處理規(guī)則、!操作符,需要的朋友可以參考下2014-12-12
這篇文章主要給大家介紹了關(guān)于JavaScript練習(xí)小項目之修改div塊的顏色的相關(guān)資料,文中通過舉例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-01-01
JavaScript判斷手機號運營商是移動、聯(lián)通、電信還是其他(代碼簡單)
本文由腳本之家小編給大家分享的基于js判斷手機號運行商是移動、聯(lián)通、電信還是其他的，然后根據(jù)不同的運營商做出對應(yīng)的處理，感興趣的朋友一起學(xué)習(xí)吧2015-09-09
今天搞項目的時候為了實現(xiàn)瀏覽者實現(xiàn)添加收藏的功能，特地了解了一下相關(guān)的API，整理了一段代碼幫助大家實現(xiàn)瀏覽器添加收藏功能，感興趣的朋友跟隨小編一起看看吧2023-02-02
這篇文章主要為大家分享了Bootstrap簡單表單顯示學(xué)習(xí)筆記,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
微信小程序目前的火熱程度相信不用多言，最近利用空余時間用小程序?qū)崿F(xiàn)了個動態(tài)的登錄頁效果，所以下面這篇文章主要給大家介紹了利用微信小程序?qū)崿F(xiàn)登錄頁云層漂浮動畫效果的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
function定義的對象有一個prototype屬性，prototype屬性又指向了一個prototype對象，注意prototype屬性與prototype對象是兩個不同的東西，要注意區(qū)別.這篇文章主要介紹了JS中的prototype的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章介紹了gojs實現(xiàn)螞蟻線動畫效果的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01