JS仿淘宝实现的简单滑动门效果代码


Posted in Javascript onOctober 14, 2015

本文实例讲述了JS仿淘宝实现的简单滑动门效果代码。分享给大家供大家参考。具体如下:

这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多。在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的。

运行效果截图如下:

JS仿淘宝实现的简单滑动门效果代码

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单仿淘宝的一个不错的滑动门</title>
<style type="text/css">
body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;}
a{color:blue;}
ul{margin:0;padding:0;list-style:none;}
#navigation{height:26px;}
#navigation li{float:left;}
#navigation li.show .content{display:block;}
#navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden}
#navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;}
#container{position:relative;width:800px;margin:50px;}
#navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;}
#navigation li .content ul li{margin-right:10px;float:none;display:inline;}
#navigation li .content ul li a{border:none;}
#navigation li .content ul li{width:120px;}
#navigation li .content ul li h3{clear:both;text-align:left;}
</style>
</head>
<body>
<div id="container">
 <ul id="navigation">
  <li><span>整站导航:</span></li>
  <li>
   <a href="#" class="index">A</a>
   <div class="content">
    <h3>百度有啊</h3>
    <ul>
     <li><a href="http://www.baidu.com">百度有啊</a></li>
     <li><a href="#">致富小康</a></li>
    </ul>
    <h3>脚本下载</h3>
    <ul>
     <li><a href="#">黄河泰山</a></li>
     <li><a href="#">池鱼之殃</a></li>
     <li><a href="#">百度有啊</a></li>
    </ul>
   </div>
  </li>
  <li>
   <a href="#" class="index">B</a>
   <div class="content">
    <h3>网页特效</h3>
    <ul>
     <li><a href="https://3water.com/jiaoben/">网页特效</a></li>
     <li><a href="http://www.baidu.com">百度搜索</a></li>
     <li><a href="http://mp3.baidu.com">百度MP3</a></li>
    </ul>
    <h3>精品代码</h3>
    <ul>
     <li><a href="#">代码索引</a></li>
     <li><a href="#">百度搜索</a></li>
    </ul>
   </div>
  </li>
  <li><a href="#" class="index">C</a><div class="content">C</div></li>
  <li><a href="#" class="index">D</a><div class="content">D</div></li>
  <li><a href="#" class="index">E</a><div class="content">E</div></li>
  <li><a href="#" class="index">F</a><div class="content">F</div></li>
  <li><a href="#" class="index">G</a><div class="content">G</div></li>
  <li><a href="#" class="index">H</a><div class="content">H</div></li>
  <li><a href="#" class="index">I</a><div class="content">I</div></li>
  <li><a href="#" class="index">J</a><div class="content">J</div></li>
  <li><a href="#" class="index">K</a><div class="content">K</div></li>
  <li><a href="#" class="index">L</a><div class="content">L</div></li>
  <li><a href="#" class="index">M</a><div class="content">M</div></li>
 </ul>
</div>
</body>
</html>
<script type="text/javascript">
function showAjaxContent(){
 var obj=document.getElementById("navigation");
 var liObj=obj.getElementsByTagName("li");
 var length=liObj.length;
 var currentLiObj;
 for(var i=0;i<length;i++){
  currentLiObj=liObj[i];
  if(currentLiObj.parentNode!=obj){continue;}
  //然后循环添加事件
  currentLiObj.onmouseover=function(){
   if(this.className.indexOf("show")<0){
    this.className+=" show";
   }
   clearStyle(this);
  }  
  currentLiObj.onmouseout=function(){
   this.className=this.className.replace("show","");
   clearStyle(this);
  }
 }
 function clearStyle(obj){
  for(var i=0;i<length;i++){
   currentLiObj=liObj[i];
   if(obj!=currentLiObj){
    currentLiObj.className=currentLiObj.className.replace("show","");
   }
  }
 }
}
showAjaxContent();
</script>

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

Javascript 相关文章推荐
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 #Javascript
smartcrop.js智能图片裁剪库
Oct 14 #Javascript
深入学习JavaScript对象
Oct 13 #Javascript
快速学习JavaScript的6个思维技巧
Oct 13 #Javascript
有关json_decode乱码及NULL的问题
Oct 13 #Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 #Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 #Javascript
You might like
php 分库分表hash算法
2009/11/12 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
使用PHP开发留言板功能
2019/11/19 PHP
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
js选项卡的制作方法
2017/01/23 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python实现文本文件合并
2015/12/29 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
使用Python生成XML的方法实例
2017/03/21 Python
python实现ip地址的包含关系判断
2020/02/07 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
2014年母亲节寄语
2014/05/07 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
诚信考试标语
2014/06/24 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书