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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
JavaScript数组push方法使用注意事项
Oct 30 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
JavaScript如何操作css
Oct 24 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
微信小程序入门教程
2016/11/18 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python 的类、继承和多态详解
2017/07/16 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python em算法的实现
2020/10/03 Python
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
优秀求职信范文分享
2014/01/26 职场文书
会议邀请函
2015/01/30 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
MongoDB数据库之添删改查
2022/04/26 MongoDB
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS