javascript 通用滑动门tab类

滑动门通用JS

/*
十三妖
qq:181907667
msn:wl181907667@hotmail.com
邮箱:thirdteendevil@163.com
*/
function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("菜单层数量和内容层数量不一样!");
return false;
}
for(var i = 0 ; i

滑动门封装类

效果预览

  • 滑动门
  • 滑动门
  • 滑动门
  • 滑动门
  • 滑动门

第一层内容

第二层内容

第三层内容

第四层内容

第五层内容

  • 滑动门
  • 滑动门
  • 滑动门
  • 滑动门
  • 滑动门

第一层内容

第二层内容

第三层内容

第四层内容

第五层内容

  • 滑动门
  • 滑动门
  • 滑动门
  • 滑动门
  • 滑动门

第一层内容

第二层内容

第三层内容

第四层内容

第五层内容

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

源代码：

代码如下:

function scrollDoor(){ 
} 
scrollDoor.prototype = { 
sd : function(menus,divs,openClass,closeClass){ 
 var _this = this; 
 if(menus.length != divs.length) 
 { 
  alert("菜单层数量和内容层数量不一样!"); 
  return false; 
 }     
 for(var i = 0 ; i < menus.length ; i++) 
 {  
  _this.$(menus[i]).value = i;     
  _this.$(menus[i]).onmouseover = function(){

for(var j = 0 ; j < menus.length ; j++) 
   {       
    _this.$(menus[j]).className = closeClass; 
    _this.$(divs[j]).style.display = "none"; 
   } 
   _this.$(menus[this.value]).className = openClass;  
   _this.$(divs[this.value]).style.display = "block";     
  } 
 } 
 }, 
$ : function(oid){ 
 if(typeof(oid) == "string") 
 return document.getElementById(oid); 
 return oid; 
} 
}

使用方法：

1.把以上代码引进你的页面 


代码如下:

<script type="text/javascript" src="scrollDoor.js"></script>

2.在页面的"<body>"标签前加入以下代码:

代码如下:

<script type="text/javascript"> 
var SDmodel = new scrollDoor();  
SDmodel.sd([菜单id数组],[显示层id数组],"菜单触发类","菜单关闭类"); 
SDmodel.sd([菜单id数组2],[显示层id数组2],"菜单触发类","菜单关闭类"); 
SDmodel.sd([菜单id数组3],[显示层id数组3],"菜单触发类","菜单关闭类"); 
</script>

其中sd方法中的参数为：

参数一 [菜单id数组]：滑动门菜单的id 
参数二 [内容id数组]：显示和隐藏滑动内容层的id 
参数三 "菜单触发类"：鼠标经过滑动门菜单的类 
参数四 "菜单关闭类"：鼠标滑出滑动门菜单的类
3.页面中有几个滑动门就调用几次sd函数,只需改变sd调用的参数,如以上代码上所展示.

赞 (0)

相关推荐

  • js实现滑动触屏事件监听的方法

    本文实例讲述了js实现滑动触屏事件监听的方法.分享给大家供大家参考.具体实现方法如下: function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; var span_top = $(span).offset().top; var start_left = $(span).offset().left; var start_top

  • js实现移动端导航点击自动滑动效果

    js实现移动端导航点击自动滑动效果

    本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.

  • js实现touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • js实现支持手机滑动切换的轮播图片效果实例

    js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • js自动滑动+鼠标滑动区域

    自动滑动+鼠标滑动区域 10秒自动跳转 热点聚焦 图说新闻 经济新闻 新闻1 新闻2 新闻3 fwdScroll(); 5秒自动跳转 财经要闻 财经观察 独家点评 湘股在线 财富排行榜 财经1 财经2 财经3 财经4 财经5 fecScroll(); ! 这个虽然效果不错,但是如果一个页面有多个这样的效果,就要针对每一部分写多个JS函数,那就太蠢了.其实只有控件名称不同而已,求高手改进成一个通用函数或者类来调用,不胜感激. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这个虽然效果

  • javascript 图片滑动切换代码

    nVida网站图片滑动-http://www.jb51.net #changebox{width:610px;height:342px;overflow:hidden; position:relative;} #changebox #changeAction{width:1220px;height:342px; position:absolute; } #changebox #changeAction #links{width:610px;height:342px;background:#000

  • 简单通用的JS滑动门代码

    复制代码 代码如下: <UL id=tabMainNav> <LI class=selected id=tab_GameinfoNav onmousemove="show_tab(0)"><SPAN><A id=tab_1 href="#">{$PHPCMS[sitename]}</A></SPAN></LI> <LI id=tab_ShareEmailNav onmousem

  • 使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

    PC 移动端兼容  IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 惯性助动,滑动回弹 门面模式 复制代码 代码如下: window.onload = function() { /*测试数据*/ var insert = ''; for (var i = 0; i < 80; i++) {  insert += '<div style = "width:100%; text-align:center;">滑动测试 ' + i + '

随机推荐