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编程起步(第六课)
Feb 27 Javascript
javascript 树控件 比较好用
Jun 11 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
Js实现自定义右键行为
Mar 26 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
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
php中的strpos使用示例
2014/02/27 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
jQuery事件对象总结
2016/10/17 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
简单谈谈Python的pycurl模块
2018/04/07 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Python基本socket通信控制操作示例
2019/01/30 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Opencv求取连通区域重心实例
2020/06/04 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
护士求职推荐信范文
2013/11/23 职场文书
小学毕业家长寄语
2014/01/19 职场文书
质量承诺书格式
2014/05/20 职场文书
学前教育专业求职信
2014/09/02 职场文书
文明礼仪倡议书
2015/04/28 职场文书
污染环境建议书
2015/09/14 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书