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


Posted in Javascript onFebruary 23, 2015

本文实例讲述了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实现youku的视频代码自适应宽度
May 25 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
js实现车辆管理系统
Aug 26 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
jQuery+AJAX实现网页无刷新上传
Feb 22 #Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 #Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 #Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 #Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 #Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 #Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 #Javascript
You might like
javascript 数组的方法集合
2008/06/05 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
js实现微信聊天效果
2020/08/09 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
python装饰器与递归算法详解
2016/02/18 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
python list多级排序知识点总结
2019/10/23 Python
python中tab键是什么意思
2020/06/18 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python PIL模块的基本使用
2020/09/29 Python
大学生个人求职信范文
2013/09/21 职场文书
生日宴会答谢词
2014/01/09 职场文书
三年级语文教学反思
2014/02/01 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
干部作风建设心得体会
2014/10/22 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers