首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
re模块(2) 事件调度器(1) cvzone(1) 监听(2) 分词器(1) for(1) okenizer(1) while(1) 无限迭代(1) sched(1)
You might like
无线电波是什么？它是怎样传输的？
2021/03/01 无线电
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
php文件上传类完整实例
2016/05/14 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
对联广告js flash激活
2006/10/19 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
jquery.form.js框架实现文件上传功能案例解析（springmvc）
2016/05/26 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
Bootstrap源码解读下拉菜单（4）
2016/12/23 Javascript
走进AngularJs之过滤器（filter）详解
2017/02/17 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
2020/03/23 Javascript
Python注释详解
2016/06/01 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python安装whl文件过程图解
2020/02/18 Python
python 回溯法模板详解
2020/02/26 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
中学生爱国演讲稿
2014/09/05 职场文书
武夷山导游词
2015/02/03 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
2019年“红色之旅”心得体会1000字（3篇）
2019/09/27 职场文书
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS