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 XML操作 封装类
Jul 01 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
基于JavaScript实现留言板功能
Mar 16 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
Zerg基本策略
2020/03/14 星际争霸
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP可变函数的使用详解
2013/06/14 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
javascript Object与Function使用
2010/01/11 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python字符串的修改方法实例
2019/12/19 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
网页美工求职信
2014/02/15 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
原告离婚代理词
2015/05/23 职场文书
志愿服务心得体会
2016/01/15 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js