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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python flask 多对多表查询功能
2017/06/25 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
python实现低通滤波器代码
2020/02/26 Python
什么是python的列表推导式
2020/05/26 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
实习自我鉴定范文
2013/10/30 职场文书
股东出资证明书范例
2014/10/04 职场文书
简历中自我评价范文
2015/03/11 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP