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 相关文章推荐
jQuery 一个图片切换的插件
Oct 09 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
中东人咖啡哲学
2021/03/03 咖啡文化
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
功能强大的php分页函数
2016/07/20 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
js几个验证函数代码
2010/03/25 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
Python验证码识别的方法
2015/07/10 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
初中班级口号
2014/06/09 职场文书
五四演讲稿范文
2014/09/03 职场文书
法人委托书范本格式
2014/09/15 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
大学生入党自荐书
2015/03/05 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Redis集群的关闭与重启操作
2021/07/07 Redis
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫