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 相关文章推荐
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
YII框架关联查询操作示例
2019/04/29 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Python中Class类用法实例分析
2015/11/12 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
应届生财务会计求职信
2013/11/05 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
迎新晚会策划方案
2014/06/13 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
城南旧事电影观后感
2015/06/16 职场文书
工作后的感想
2015/08/07 职场文书
2016国培学习心得体会
2016/01/08 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python
MySql数据库 查询时间序列间隔
2022/05/11 MySQL