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 相关文章推荐
input按钮的事件处理大全
Dec 10 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
绑定回车enter事件代码
May 18 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
javascript操作数组详解
Dec 17 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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的十大要点(上)
2009/02/04 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
实现PHP搜索加分页
2016/10/12 PHP
jquery根据name属性查找的小例子
2013/11/21 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python创建xml的方法
2015/03/10 Python
python脚本内运行linux命令的方法
2015/07/02 Python
python web框架学习笔记
2016/05/03 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
解决python replace函数替换无效问题
2020/01/18 Python
python实现图片横向和纵向拼接
2020/03/05 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
给女朋友的道歉信
2014/01/10 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
商场消防安全责任书
2014/07/29 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
python获取字符串中的email
2022/03/31 Python
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python