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

更新时间：2015年02月23日 10:45:50 作者：代码家园

这篇文章主要介绍了JS实现仿中关村论坛评分后弹出提示效果的方法,实例分析了javascript弹出特效的css与提示框的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

<!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="谢谢参与！经验+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封闭函数及常用内置对象示例
这篇文章主要介绍了JavaScript封闭函数及常用内置对象,结合实例形式分析了JavaScript封闭函数及常用内置对象的定义与简单使用相关操作技巧,需要的朋友可以参考下
2019-05-05
js 计算月/周的第一天和最后一天代码
这篇文章主要介绍了js 计算月/周的第一天和最后一天代码,需要的朋友可以参考下
2020-02-02
JavaScript中的逻辑判断符&&、||与!介绍
这篇文章主要介绍了JavaScript中的逻辑判断符&&、||与!介绍,本文讲解了逻辑与&&的处理规则、逻辑或||的处理规则、!操作符,需要的朋友可以参考下
2014-12-12
JavaScript练习小项目之修改div块的颜色
这篇文章主要给大家介绍了关于JavaScript练习小项目之修改div块的颜色的相关资料,文中通过举例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-01-01
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
本文由脚本之家小编给大家分享的基于js判断手机号运行商是移动、联通、电信还是其他的，然后根据不同的运营商做出对应的处理，感兴趣的朋友一起学习吧
2015-09-09
基于JavaScript实现浏览器添加收藏功能
今天搞项目的时候为了实现浏览者实现添加收藏的功能，特地了解了一下相关的API，整理了一段代码帮助大家实现浏览器添加收藏功能，感兴趣的朋友跟随小编一起看看吧
2023-02-02
Bootstrap简单表单显示学习笔记
这篇文章主要为大家分享了Bootstrap简单表单显示学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
微信小程序实现登录页云层漂浮的动画效果
微信小程序目前的火热程度相信不用多言，最近利用空余时间用小程序实现了个动态的登录页效果，所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-05-05
聊一聊JS中的prototype
function定义的对象有一个prototype属性，prototype属性又指向了一个prototype对象，注意prototype属性与prototype对象是两个不同的东西，要注意区别.这篇文章主要介绍了JS中的prototype的相关资料,需要的朋友可以参考下
2016-09-09
gojs实现蚂蚁线动画效果
这篇文章介绍了gojs实现蚂蚁线动画效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01