网站顶部横栏提示层带关闭功能代码,JS代码库,德仔网

代码语言

代码分类

【JS】网站顶部横栏提示层带关闭功能

作者:高爷爷 / 发布于2012/8/21/ 572

网站顶部横栏提示层带关闭功能

<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js页面提示广告效果-<title>
<style>
body{font:12px/16px arial;margin:0}
#TopTipHolder{height:0;overflow:hidden;position:relative}
#TopTip{height:35px;line-height:35px;text-align:center;background:#FC0}
#TopTipClose{width:85px;height:19px;background:url(<a href="http://www.iiwnet.com/images/jstx/close.gif">http://www.iiwnet.com/images/jstx/close.gif</a>) no-repeat;position:absolute;right:10px;top:10px}
</style>
</head>
<body>
<div id="TopTipHolder"><div id="TopTip">网页特效代码 网站顶部头部提示广告JS效果</div><div id="TopTipClose" title="关闭"></div></div>
<script>
/* 
* 页面顶部提示栏效果(TopTipEffect)
* 
* author: 爱微网
* version: 1.0.0
* @param {string} id tip提示标签id
* @param {string} holderId 父标签
* @param {bool} expand 展开/收起
* @param {string} step 每次移动步长
* @param {object} speed 移动速度
*/
var TopTipEffect = function(id, holderId, expand, step, speed){
 this.obj = document.getElementById(id);
 this.holder = document.getElementById(holderId);
 this.step = step;
 this.speed = speed;
 this.expand = expand;
 this.maxH = this.obj.offsetHeight;
 this.moveT = null;
 this.moving = false;
 this.tempH = expand ? 0 : this.maxH;
}
TopTipEffect.prototype = {
 play : function(){
 if(this.moving) return;
 if(this.holder.offsetHeight > this.maxH) return;
 var _this = this;
 this.moveT = setInterval(function(){_this.move()}, _this.speed);
 },
 move : function(){
 this.moving = true;
 if(this.expand){
 this.tempH += this.step;
 if(this.tempH > this.maxH){
 if((this.tempH - this.maxH) >= this.step){
 this.expand = false;
 this.moving = false;
 clearInterval(this.moveT);
 return;
 }else{
 this.tempH = this.maxH;
 }
 }
 }else{
 this.tempH -= this.step;
 if(this.tempH < 0){
 if(-this.tempH >= this.step){
 this.expand = true;
 this.moving = false;
 clearInterval(this.moveT);
 return;
 }else{
 this.tempH = 0;
 }
 }
 }
 this.holder.style.height = this.tempH + "px";
 this.holder.scrollTop = this.maxH - this.tempH;
 }
}
var mytip = new TopTipEffect("TopTip", "TopTipHolder", true, 1, 10);
mytip.play();
//右上角关闭按钮点击
document.getElementById("TopTipClose").onclick = function(){
 mytip.play();
}
</script>
</body>
</html></div>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　顶部横栏提示层　

同语言下

可能有用的

高爷爷贡献的其它代码(3)