当前位置：创新互联 >> 常见问题 >> 前端开发 >> jQuery >> jQuery 滑动门自动滑动实现代码

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

作者：创新互联文章来源：前端开发部点击数：更新时间：2008-10-08
本文要介绍的 jQuery 让滑动门滑动起来。
先看一个我精简出来的 DEMO。然后再来分解一下：
一、首先还是 HTML 部分：
代码如下复制代码

<div id="tab">
    <div id="tabContentA">
        <p>tabContentA</p>
    </div>
    <div id="tabContentB">
        <p>tabContentB</p>
    </div>
    <div id="tabContentC">
        <p>tabContentC</p>
    </div>
</div>


<div id="switcher">
    <ul>
        <li id="switcherA">switcherA</li>
        <li id="switcherB">switcherB</li>
        <li id="switcherC">switcherC</li>
    </ul>
    <span></span>
</div>


二、然后是 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")
    });
});

完整实例
代码如下复制代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<style type="text/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;left:75px;background:#000;display:block;}
</style>
<title>jQuery 让滑动门滑动起来</title>
</head>
<body>
<div id="tab">
<div id="tabContentA">
   <p>tabContentA</p>
   <p>tabContentA</p>
   <p>tabContentA</p>
   <p>tabContentA</p>
   <p>tabContentA</p>
   <p>tabContentA</p>
   <p>tabContentA</p>
   <p>tabContentA</p>
</div>
<div id="tabContentB">
   <p>tabContentB</p>
   <p>tabContentB</p>
   <p>tabContentB</p>
   <p>tabContentB</p>
   <p>tabContentB</p>
   <p>tabContentB</p>
   <p>tabContentB</p>
   <p>tabContentB</p>
</div>
<div id="tabContentC">
   <p>tabContentC</p>
   <p>tabContentC</p>
   <p>tabContentC</p>
   <p>tabContentC</p>
   <p>tabContentC</p>
   <p>tabContentC</p>
   <p>tabContentC</p>
   <p>tabContentC</p>
</div>
</div>
<div id="switcher">
<ul>
   <li id="switcherA">switcherA</li>
   <li id="switcherB">switcherB</li>
   <li id="switcherC">switcherC</li>
</ul>
<span></span>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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
jquery弹出div对话框实例代码 :上一篇
两百个jQuery插件集合 :下一篇

前端开发

域名注册

虚拟主机

网站建设

服务器租用

营销推广

网站程序

移动互联网

企业邮箱

网站备案

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

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

jQuery相关文章