JS 滑动门（溢出部分用按钮）

dtt3401885

浏览: 17979 次

最近访客更多访客>>

zxsy007x

jiuyuesun

lizhao1226

pipi517

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (23)

社区版块

存档分类

<!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">
* { margin:0px; padding:0px;}
.MenuTab { margin:0 auto; width:1000px; overflow:hidden; height:24px;}
.MenuTab .LeftTabBtn,.MenuTab .RightTabBtn { float:left; width:45px; height:24px; text-align:center; font:14px/24px "宋体"; cursor:pointer;}
.MenuTab .MenuTabBtn { float:left; width:900px; overflow:hidden; height:24px; position:relative;}
.MenuTabBtn ul { list-style:none; width:10000px; position:absolute; height:24px; overflow:hidden; left:0px; top:0px;}
.MenuTabBtn ul li { float:left; width:178px; height:22px; border:1px solid #dedede; text-align:center; font:14px/24px "宋体"; cursor:pointer;}
.MenuTabCont { margin:0 auto; width:1000px; overflow:hidden; height:300px;}
.MenuTabCont .MenuTabContent { background:#0FF; color:#000; width:1000px; overflow:hidden; height:300px; display:none;}
</style>
<script type="text/javascript" src="http://www.shopbest.cn/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i=0;
$DtDiv = $(".MenuTabBtn > ul > li");
$DtDiv.click(function(){
DdDiv = $DtDiv.index(this);
$(".MenuTabContent").eq(DdDiv).show().siblings().hide();
})
$(".LeftTabBtn").click(function(){
if(i>0){i--;LeftWid = i*180;$(".MenuTabBtn > ul").css("left",-LeftWid);}
else{alert("左边没了菜单");}})
$(".RightTabBtn").click(function(){
if(i<2){i++;LeftWid = i*180;$(".MenuTabBtn > ul").css("left",-LeftWid);}
else{alert("右边没了菜单");}})
})
</script>
</head>

<body>
<div class="MenuTab">
<div class="LeftTabBtn">←</div>
    <div class="MenuTabBtn">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </div>
    <div class="RightTabBtn">→</div>
</div>
<div class="MenuTabCont">
<div class="MenuTabContent" style="display:block;">1</div>
    <div class="MenuTabContent">2</div>
    <div class="MenuTabContent">3</div>
    <div class="MenuTabContent">4</div>
    <div class="MenuTabContent">5</div>
    <div class="MenuTabContent">6</div>
    <div class="MenuTabContent">7</div>
</div>
</body>
</html>

分享到：