JS实现仿中关村论坛评分后弹出提示效果的方法

开发 前端
本文实例讲述了JS实现仿中关村论坛评分后弹出提示效果的方法。分享给大家供大家参考。

JS实现仿中关村论坛评分后弹出提示效果的方法

本文实例讲述了JS实现仿中关村论坛评分后弹出提示效果的方法。分享给大家供大家参考。具体实现方法如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4. <title>JS仿中关村论坛评分后弹出提示的效果</title> 
  5. </head> 
  6. <body> 
  7. <script language="javascript"
  8. var x=window.x||{}; 
  9. x.creat=function(t,b,c,d){ 
  10.  this.t=t; 
  11.  this.b=b; 
  12.  this.c=c; 
  13.  this.d=d; 
  14.  this.op=1
  15.  this.div=document.createElement("div"); 
  16.  this.div.style.height="40px"
  17.  this.div.style.width="100px"
  18.  this.div.style.background="red"
  19.  this.div.style.position="absolute"
  20.  this.div.style.left="50%"
  21.     this.div.style.marginLeft="-50px" 
  22.  this.div.style.marginTop="-20px" 
  23.  this.div.innerText="谢谢参与!经验+5" 
  24.  this.div.style.fontSize="12" 
  25.  this.div.style.lineHeight=this.div.style.height 
  26.  this.div.style.textAlign="center"
  27.  this.div.style.fontWeight="bold";  
  28.  //this.div.style.border="solid red 1px";  
  29.  this.div.style.color="#fff" 
  30.  this.div.style.top=(this.b+"%"); 
  31.  document.body.appendChild(this.div); 
  32.  this.run(); 
  33. x.creat.prototype={ 
  34.  run:function(){ 
  35.   var me=this
  36.   this.div.style.top=-this.c*(this.t/this.d)*(this.t/this.d)+this.b+"%"
  37.   this.t++; 
  38.   this.q=setTimeout(function(){me.run()},25
  39.   if(this.t==this.d){ 
  40.    clearTimeout(me.q); 
  41.    setTimeout(function(){me.alpha();},1000); 
  42.   } 
  43.  }, 
  44.  alpha:function(){ 
  45.   var me=this
  46.   if("\v"=="v"){ 
  47.    this.div.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+this.op*100+")"
  48.    this.div.style.filter="alpha(opacity="+this.op*100+")"
  49.   ;} 
  50.   else{this.div.style.opacity=this.op} 
  51.   this.op-=0.02
  52.   this.w=setTimeout(function(){me.alpha()},25
  53.   if(this.op<=0){ 
  54.    clearTimeout(this.w); 
  55.    document.body.removeChild(me.div); 
  56.   } 
  57.  } 
  58. new x.creat(1,50,25,30); 
  59. </script> 
  60. </body> 
  61. </html> 

希望本文所述对大家的javascript程序设计有所帮助。

原文链接:http://www.chengxuyuans.com/javascript/91935.html

责任编辑:王雪燕 来源: 程序员之家
相关推荐

2011-03-30 14:33:57

jQueryJavaScript

2022-09-21 14:51:21

ArkUI信件弹出

2015-07-23 15:15:06

动态弹出

2010-09-07 09:30:25

DIV弹出jQuery

2015-02-02 16:42:49

特效密码锁

2011-03-03 09:35:04

js

2023-11-22 07:47:34

2011-04-15 09:29:20

jQueryFlash

2015-01-19 12:19:04

iOS源码ActionSheet仿QQ音乐

2011-06-09 09:42:23

JavaScript

2010-08-03 11:29:09

Flex全屏

2010-08-30 10:09:07

JavaScriptDIV

2011-06-03 09:34:14

Android iphone tab

2016-08-30 21:36:56

JavascriptCSSWeb

2011-06-03 09:05:18

Android iphone tab

2015-03-31 18:19:37

饿了么动画效果

2017-03-22 10:35:06

AndroidRecyclerVie滑动效果

2022-09-20 14:35:59

ArkUI鸿蒙JS
点赞
收藏

51CTO技术栈公众号