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中常用的55个经典技巧
Aug 12 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
原生js实现吸顶效果
Mar 13 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHPMailer发送邮件
2016/12/28 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
js点击选择文本的方法
2015/02/09 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
js实现筛选功能
2020/11/24 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
医学生个人求职信范文
2013/09/24 职场文书
基层党员公开承诺书
2014/05/29 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS