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程序设计有所帮助。


来源:51CTO

相关文章
|
14天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
16天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
17天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
1月前
|
JavaScript 前端开发
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
19 1
|
1月前
|
JavaScript
JS绑定事件的三种方法(简单易懂)
JS绑定事件的三种方法(简单易懂)
|
1月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
14天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1月前
|
JavaScript
JS数组增删方法的原理,使用原型定义
JS数组增删方法的原理,使用原型定义
|
7天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
8天前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?