自动跳动滑动门html,jQuery 滑动门自动滑动实现代码

作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2008-10-08

本文要介绍的 jQuery 让滑动门滑动起来。

先看一个我精简出来的 DEMO。然后再来分解一下：

一、首先还是 HTML 部分：

代码如下 复制代码

tabContentA

tabContentB

tabContentC

• switcherA
• switcherB
• switcherC

二、然后是 CSS 部分：

代码如下 复制代码

*{margin:0;padding:0;}

#tab{height:180px;padding:10px 20px;overflow:hidden;position:relative;}

#tabContentB,#tabContentC{display:none;}/* 非首块内容区域默认不显示 */

#tab div{height:200px;}

#switcher li{width:150px;height:30px;line-height:30px;text-align:center;float:left;cursor:pointer;list-style:none;}

#switcher span{width:10px;height:10px;overflow:hidden;position:absolute;background:#000;display:block;left:75px;}

三、js 部分(先加载 jQuery，这个就略过了，你懂的)：

代码如下 复制代码

$(document).ready(function(){

$("li#switcherA").hover(function () {

$("#switcher span").stop(true,true);

$("#switcher span").animate({

left:"75px"

},250);

$("#tabContentA").fadeIn("slow");

$("#tabContentB").fadeOut("fast");

$("#tabContentC").fadeOut("fast")

});

$("li#switcherB").hover(function () {

$("#switcher span").stop(true,true);

$("#switcher span").animate({

left:"225px"

},250);

$("#tabContentA").fadeOut("fast");

$("#tabContentB").fadeIn("slow");

$("#tabContentC").fadeOut("fast")

});

$("li#switcherC").hover(function () {

$("#switcher span").stop(true,true);

$("#switcher span").animate({

left:"375px"

},250);

$("#tabContentA").fadeOut("fast");

$("#tabContentB").fadeOut("fast");

$("#tabContentC").fadeIn("slow")

});

});

完整实例

代码如下 复制代码

*{margin:0;padding:0;}

#tab{height:180px;padding:10px 20px;overflow:hidden;position:relative;}

#tabContentB,#tabContentC{display:none;}

#tab div{height:200px;}

#switcher li{width:150px;height:30px;line-height:30px;text-align:center;float:left;cursor:pointer;list-style:none;}

#switcher span{width:10px;height:10px;overflow:hidden;position:absolute;left:75px;background:#000;display:block;}

jQuery 让滑动门滑动起来

tabContentA

tabContentA

tabContentA

tabContentA

tabContentA

tabContentA

tabContentA

tabContentA

tabContentB

tabContentB

tabContentB

tabContentB

tabContentB

tabContentB

tabContentB

tabContentB

tabContentC

tabContentC

tabContentC

tabContentC

tabContentC

tabContentC

tabContentC

tabContentC

• switcherA
• switcherB
• switcherC

$(document).ready(function(){

$("li#switcherA").hover(function () {

$("#switcher span").stop(true,true);

$("#switcher span").animate({

left:"75px"

},250);

$("#tabContentA").fadeIn("slow");

$("#tabContentB").fadeOut("fast");

$("#tabContentC").fadeOut("fast")

});

$("li#switcherB").hover(function () {

$("#switcher span").stop(true,true);

$("#switcher span").animate({

left:"225px"

},250);

$("#tabContentA").fadeOut("fast");

$("#tabContentB").fadeIn("slow");

$("#tabContentC").fadeOut("fast")

});

$("li#switcherC").hover(function () {

$("#switcher span").st