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中出现乱码的处理心得
Dec 24 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
详解webpack babel的配置
Jan 09 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
微信小程序反编译的实现
Dec 10 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
UCenter 批量添加用户的php代码
2012/07/17 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
nodejs教程之入门
2014/11/21 NodeJs
介绍JavaScript的一个微型模版
2015/06/24 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python版本的读写锁操作方法
2016/04/25 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
Python FFT合成波形的实例
2019/12/04 Python
python爬取抖音视频的实例分析
2021/01/19 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
给同学的道歉信
2014/01/16 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
迟到检讨书300字
2014/02/14 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
月考总结与反思
2015/10/22 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python