jQuery 滑动门自动滑动实现代码

时间：2013-07-17 编辑：简简单单来源：一聚教程网

本文要介绍的 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")
    });
});

完整实例

代码如下

复制代码

jQuery 让滑动门滑动起来

tabContentA

tabContentB

tabContentC

switcherA

switcherB

switcherC

上一个： jQuery/JavaScript 实现的异步加载图片效果
下一个： js控制网页在特定iframe中打开程序代码

推荐专题

最新下载

热门教程

jQuery 滑动门自动滑动实现代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程