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判断单个复选框是否被选中的代码
Sep 03 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
js电话号码验证方法
Sep 28 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
js序列化和反序列化的使用讲解
Jan 19 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读取flv文件的播放时间长度
2009/09/03 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python类属性的延迟计算
2016/10/22 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
应届大学生自荐信格式
2013/09/21 职场文书
会计辞职信范文
2014/01/15 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
道路施工安全责任书
2014/07/24 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
户外拓展训练感想
2015/08/07 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
安全生产协议书
2016/03/22 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers