教程集 www.jiaochengji.com
Golang 教程
教程集 >  脚本编程  >  javascript  >  正文 网站顶部带缓冲打开和关闭功能的横栏提示层js代码

网站顶部带缓冲打开和关闭功能的横栏提示层js代码

发布时间：2016-12-03   编辑：jiaochengji.com
教程集为您提供网站顶部带缓冲打开和关闭功能的横栏提示层js代码等资源，欢迎您收藏本站，我们将为您提供最新的网站顶部带缓冲打开和关闭功能的横栏提示层js代码资源
网站顶部带缓冲打开和关闭功能的横栏提示层js代码 ，原生js写的有需要的朋友可参考一下，同时也可以改成顶部广告效果哦
提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网站顶部带缓冲打开和关闭功能的横栏提示层js代码</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> 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{cursor:hand;width:85px;height:19px;background:url(http://www.zzsky.cn/effect/images/20128/close.gif) no-repeat;position:absolute;right:10px;top:10px} </style> </head> <body>
网站顶部带缓冲效果和关闭功能的横栏提示效果
<script type="text/javascript"> /* * 页面顶部提示栏效果(TopTipEffect) * * 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> </textarea>
提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
网站顶部带缓冲打开和关闭功能的横栏提示层js代码
PHP基础之输出缓冲区基本概念、原理分析
php输出缓存ob系列函数用法
JavaScript自动弹出窗口并自动关闭窗口代码
PHP输出缓冲及其应用的例子
php函数ob_start()、ob_end_clean()、ob_get_contents()
用缓冲技术提高JSP应用的性能和稳定性
深入php ob_start的用法详解
PHP生成静态页面的方法
用PHP的ob_start()控制您的浏览器cache

上一篇：JS控制文本框只能输入N个字符代码 下一篇：浮在页面上的导航菜单
[关闭]
最近更新
浏览排行

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
京ICP备12039225号-6 广告合作请加QQ:441358019
CopyRight © 2010-2014 教程集 jiaochengji.com , All Rights Reserved.

~ ~