JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码


Posted in Javascript onSeptember 17, 2015

本文实例讲述了JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码。分享给大家供大家参考。具体如下:

这是一款阿里妈妈网站顶部banner代码,采用滑出的方式,一个经典的工具条代码,可以当作菜单来用,同时还有完善的功能,可以适时关闭工具条,整体效果设计美观,简洁漂亮。

运行效果截图如下:

JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

在线演示地址如下:

具体代码如下:

<!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>阿里妈妈网站顶部banner代码</title>
<style>
body{margin:0px;padding:0px}
.home_tx {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(images/hometx_03.gif); PADDING-BOTTOM: 0px; MARGIN: auto; OVERFLOW: hidden; WIDTH: 950px; PADDING-TOP: 0px}
.home_tx IMG {BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px}
.home_tx DL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 10px 0px 0px; WIDTH: 61px; PADDING-TOP: 0px; HEIGHT: 37px}
.home_tx SPAN {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 830px; COLOR: #333333; LINE-HEIGHT: 34px; PADDING-TOP: 0px; HEIGHT: 37px; TEXT-ALIGN: left}
.home_tx SPAN B {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #990000; PADDING-TOP: 0px}
.home_tx A {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 35px; PADDING-TOP: 0px; HEIGHT: 37px}
</style>
</head>
<body>
<DIV id=home_tx style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: auto; OVERFLOW: hidden; WIDTH: 950px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 1px">
<DIV class=home_tx id=home_tx_in style="POSITION: absolute; TOP: -37px; HEIGHT: 37px" align=center>
<DL><IMG src="images/hometx_01.gif"></DL><SPAN><B>三水点靠木提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</B> 
<A style="FLOAT: none" href="#" target=_blank>详情>></A></SPAN> <A style="CURSOR: pointer" onfocus=this.blur() onClick="home_tx_hide();return false;" href="#"><IMG src="images/hometx_04.gif"></A> </DIV></DIV>
<script>
var is_home_tx_show = false;
var div_home_tx = document.getElementById("home_tx");
var div_home_tx_in = document.getElementById("home_tx_in");
var stepms = 10;
function home_tx_show(){
 home_tx_stepshow();
}
function home_tx_stepshow(){
 var curHeight = parseInt(div_home_tx.offsetHeight);
 if(curHeight>=37){
  is_home_tx_show = true;
 }else{
  div_home_tx.style.height = (curHeight + 4) + "px";
  div_home_tx_in.style.top = (parseInt(div_home_tx_in.style.top)+4)+"px";
  window.setTimeout(home_tx_stepshow,30);
 }
}
function home_tx_hide(){
 if(is_home_tx_show){
  home_tx_stephide()
 }else{
  window.setTimeout(home_tx_stephide,1200);
 }
}
function home_tx_stephide(){
 var curHeight = parseInt(div_home_tx.style.height);
 if(curHeight<=0){
  is_home_tx_show = false;
 }else{
  try{
   div_home_tx.style.height = (curHeight - 4) + "px";
   div_home_tx_in.style.top = (parseInt(div_home_tx_in.style.top)-4)+"px";
   window.setTimeout(home_tx_stephide,30);
  } catch(e) {}
 }
}
if(window.addEventListener){
 window.addEventListener("load",home_tx_show,false);
}else{
 window.attachEvent("onload",home_tx_show);
}
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 #Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 #Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 #Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 #Javascript
JQuery入门基础小实例(1)
Sep 17 #Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 #Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 #Javascript
You might like
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python自动安装pip
2014/04/24 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python批量创建指定名称的文件夹
2019/03/21 Python
python pygame实现五子棋小游戏
2020/10/26 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
python实现横向拼接图片
2020/03/23 Python
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
八一建军节活动方案
2014/02/10 职场文书
意向书范文
2014/03/31 职场文书
协议书模板
2014/04/23 职场文书
女儿满月酒致辞
2015/07/29 职场文书
Python各协议下socket黏包问题原理
2022/04/12 Python