JS實現(xiàn)仿中關村論壇評分后彈出提示效果的方法

更新時間：2015年02月23日 10:45:50 作者：代碼家園

這篇文章主要介紹了JS實現(xiàn)仿中關村論壇評分后彈出提示效果的方法,實例分析了javascript彈出特效的css與提示框的具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)仿中關村論壇評分后彈出提示效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<!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仿中關村論壇評分后彈出提示的效果</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程序設計有所幫助。

您可能感興趣的文章:

javascript 文章截取部分無損html顯示實現(xiàn)代碼
近在做一些內(nèi)容搜索的工作，搜索出來的內(nèi)容為html格式，列表部分需要顯示每項內(nèi)容的一部分。
2010-05-05
js生成動態(tài)表格并為每個單元格添加單擊事件的方法
這篇文章主要介紹了使用javascript生成動態(tài)表格并為每個單元格添加單擊事件,需要的朋友可以參考下
2014-04-04
微信小程序接入vant Weapp組件的詳細步驟
這篇文章主要介紹了微信小程序接入vant Weapp組件的詳細步驟,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
Javascript實現(xiàn)仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
兼容:IE7以上版本及FF；（騰訊的WebQQ3.0好像也不兼容IE6,其實這樣挺好的）
2011-04-04
拖動一個HTML元素
拖動一個HTML元素...
2006-12-12
Js中使用正則表達式驗證輸入是否有特殊字符
這篇文章主要介紹了Js中使用正則表達式驗證輸入是否有特殊字符的簡單代碼，并通過一小段代碼給大家介紹了js正則表達式驗證同一字符串不同,需要的朋友可以參考下
2018-09-09
詳談構(gòu)造函數(shù)加括號與不加括號的區(qū)別
下面小編就為大家?guī)硪黄斦剺?gòu)造函數(shù)加括號與不加括號的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
return false,對阻止事件默認動作的一些測試代碼
很明顯我們每個函數(shù)都返回false,如果返回值可以阻止事件默認動作，那么文本框?qū)o法輸入任何內(nèi)容。看下面我測試的結(jié)果，注意紅的部分。
2010-11-11
基于JavaScript實現(xiàn)瀑布流效果
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)瀑布流效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
小程序?qū)崿F(xiàn)橫向滑動日歷效果
這篇文章主要介紹了小程序?qū)崿F(xiàn)橫向滑動日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10