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 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
PHP代码加密的方法总结
2020/03/13 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
跟老齐学Python之print详解
2014/09/28 Python
python排序方法实例分析
2015/04/30 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
python进程和线程用法知识点总结
2019/05/28 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
小学感恩教育活动总结
2014/07/07 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
python pyhs2 的安装操作
2021/04/07 Python
Python Django搭建文件下载服务器的实现
2021/05/10 Python
python 中的jieba分词库
2021/11/23 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
Docker部署Mysql8的实现步骤
2022/07/07 Servers