jQuery实现的多滑动门,多选项卡效果代码

来源：阅读：958 次日期：2016-07-15 16:13:56

温馨提示：小编为您整理了“jQuery实现的多滑动门,多选项卡效果代码”,方便广大网友查阅！

本文实例讲述了jQuery实现的多滑动门，多选项卡效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>超多滑动门效果</title>

* {

margin:0;

padding:0;

}

body {

font-size:12px;

}

ul, li {

list-style-type:none;

}

#tab {

width:500px;

height:200px;

margin:20px auto;

overflow:hidden;

}

#tab .tab_title {

width:500px;

height:22px;

overflow:hidden;

left:0;

top:0;

clear:both;

overflow:hidden;

position:relative;

}

#tab .tab_title .u {

width:465px;

overflow:hidden;

position:relative;

}

#tab .tab_title ul {

margin:0 5px;

position:absolute;

float:left;

width:2784px;/*这个即是滑动门的总长度！就是所有的li的宽度加上间距！计算本案例中的宽度即为：24*100+14*24+24*2（2为边框宽度）=2784 */

}

#tab .tab_title div {

float:left;

width:15px;

height:20px;

line-height:20px;

cursor:pointer;

}

#tab .tab_title span.vright {

top:0;

right:5px;

margin-left:2px;

}

#tab .tab_title span.vleft {

top:0;

left:0px;

padding-left:5px;

}

#tab .tab_title li {

float:left;

width:100px;/*这个的宽度即是四个滑动门栏目的宽度*/

height:20px;

line-height:20px;

text-align:center;

background-color:#cccccc;

margin-right:14px;

border:1px #999999 solid;

cursor:pointer;

}

#tab .tab_title li:hover {

background-color:#999999

}

#tab .tab_title li.selected {

background-color:#666666;

}

#tab .tab_content {

width:476px;

height:156px;

overflow:hidden;

padding:10px;

border:1px #CCCCCC solid;

}

#tab .tab_content div {

border:1px #999999 dotted;

}

#tab .tab_content div p {

line-height:1.5;

text-indent:25px;

color:#333333;

}

#tab .tab_content .none {

display:none;

}

#div1 {

border:1px #CCCCCC solid;

position:absolute;

display:none;

background:#EEF7EE;

font-size:12px;

padding:5px;

color:#999999;

}

#div2 {

width:120px;

height:15px;

border:1px #CCCCCC solid;

position:absolute;

display:none;

background:#CCCCCC;

font-size:5px;

padding:2px;

color:#999999;

}

</style>

$(function(){

var index = 0;

$(".tab_title ul li").click(function(){

index = $(".tab_title ul li").index(this);

$(this).addClass("selected").siblings().removeClass("selected");

$(".tab_content div").eq(index).show().siblings().hide();

});

var i = 4; //这个前端展示几个滑动门栏目

var len = $(".u .scrol li").length;

var page = 1;

var maxpage = Math.ceil(len/i);

var scrollWidth = $(".u").width();

var divbox = "<div id='div1' >呵呵，没有了</div>";

$("body").append(divbox);

$(".vright").click(function(e){

if(!$(".u .scrol").is(":animated")){

if(page == maxpage ){

$(".u .scrol").stop();

$("#div1").css({

"top": (e.pageY + 20) +"px",

"left": (e.pageX + 20) +"px",

"opacity": "0.9"

}).stop(true,false).fadeIn(800).fadeOut(800);

}else{

$(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000);

page++;

}

});

$(".vleft").click(function(){

if(!$(".u .scrol").is(":animated")){

if(page == 1){

$(".u .scrol").stop();

}else{

$(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000);

page--;

}

});

</script>

</head>

<body>

</ul>

</div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：JavaScript常用本地对象小结

下一篇：轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码

手机网站地址：jQuery实现的多滑动门,多选项卡效果代码

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！