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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
js实现网页随机验证码
Oct 19 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读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js读取配置文件自写
2014/02/11 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
C语言笔试题回忆
2015/04/02 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
四年级数学教学反思
2014/02/02 职场文书
服务宗旨标语
2014/07/01 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers