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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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实现用户的增删改查
2015/03/24 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
smarty自定义函数用法示例
2016/05/20 PHP
网页javascript精华代码集
2007/01/24 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
vue之延时刷新实例
2019/11/14 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
python类定义的讲解
2013/11/01 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
python实现手机销售管理系统
2019/03/19 Python
python opencv摄像头的简单应用
2019/06/06 Python
python画双y轴图像的示例代码
2019/07/07 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
幼儿园大班家长评语
2014/04/17 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
党员民主生活会材料
2014/12/15 职场文书
个人事迹材料范文
2014/12/29 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
调研报告的主要写法
2019/04/18 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
JS高级程序设计之class继承重点详解
2022/07/07 Javascript