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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
vuex vue简单使用知识点总结
Aug 29 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php实现mysql数据库备份类
2008/03/20 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
新闻内页-JS分页
2006/06/07 Javascript
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
js Math 对象的方法
2013/09/01 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
python正则分析nginx的访问日志
2017/01/17 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python 输出上个月的月末日期实例
2018/04/11 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
解决python 文本过滤和清理问题
2019/08/28 Python
Python创建数字列表的示例
2019/11/28 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
教师个人考察材料
2014/12/16 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
httpclient调用远程接口的方法
2022/08/14 Java/Android