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图表动画插件Highcharts Examples
Apr 16 Javascript
js实现目录定位正文示例
Nov 14 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
js实现表格字段排序
Feb 19 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 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获得url参数中具有&amp;的值的方法
2014/03/05 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
JavaScript库 开发规则
2009/01/31 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
PyTorch的torch.cat用法
2020/06/28 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Django admin组件的使用
2020/10/24 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
爱心捐款倡议书范文
2014/05/12 职场文书
会计学专业求职信
2014/07/17 职场文书
2014年教师节寄语
2014/08/11 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
项目投资意向书范本
2015/05/09 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
小学教师教育随笔
2015/08/14 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
k8s部署redis cluster集群的实现
2021/06/24 Redis
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电