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 instanceof 与typeof使用说明
Jan 11 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
JS解析XML实例分析
Jan 30 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
js给table赋值的实例代码
Oct 13 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
JavaScript实现简易计算器小功能
Oct 22 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
关于尾递归的使用详解
2013/05/02 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
RequireJs的使用详解
2017/02/19 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
django跳转页面传参的实现
2020/09/17 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
EJB timer的种类
2014/10/28 面试题
煤矿安全协议书
2014/08/20 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
实习护士自荐信
2015/03/25 职场文书
校运会通讯稿
2015/07/18 职场文书
入门学习Go的基本语法
2021/07/07 Golang