jquery tab 切换代码 滑动门
发布网友
共2个回答
热心网友
快下班了，题目给我留着，回家或者明天给你写。
有一点要注意的是，“当鼠标不在 li 上 且不在相对应的 div 上时”这里，如果内容与滑门有一定距离的话，鼠标离开滑门内容就到默认块了，也就不存在鼠标到对应的内容块上去了。所以，应该是“当一定时间内，鼠标不在 li 上 且不在相对应的 div 上时，div为默认区块内容”。
我理解的没错的话，就可以了，回头给你写
代码给你写好了，做了个插件，加上demo有点长，我先贴出来看行不行，不行我可以发给你。
把下面的拷到一个html文件里，直接在浏览器里看效果。插件的用法都在代码的注释里了。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script>
/***
* anthor: Mao wl
* switch control Plug-in
*
* based on Jquery
*
demo:
$('#switchWrap').switchControl({
slideSpeed: 300,//content cutover speed
controlTo: $('#contentWrape'),//be controlled wrap
contentDefaultNum: 0,//default content number, start from 0
checkRevertDefault_interval: 600//the interval revert to default content while cursor not hover on switchWrap or contentWrape
});
*
**/
(function(a){a.fn.switchControl=function(c){var e=a.extend({},{slideSpeed:300,controlTo:{},contentDefaultNum:0,checkRevertDefault_interval:1500},c);var b={t:""};var f=function(h){var i=0;a.each(h.prevAll(),function(){i+=a(this).width()});a("#switchControlWrap").animate({left:-i},e.slideSpeed)};var g=function(h,i){if(!h.hasClass("hover")&&!e.controlTo.hasClass("hover")){f(i)}};var d=function(h){var i=a("#switchControlWrap").children().eq(h);var j=0;a.each(i.prevAll(),function(){j+=a(this).width()});a("#switchControlWrap").animate({left:-j},e.slideSpeed)};return a(this).each(function(){var i=a(this);var h=0;var j=0;a.each(e.controlTo.children(),function(){if(a(this).height()>j){j=a(this).height()}h+=a(this).width()});e.controlTo.children().wrapAll("<div id='switchControlWrap' style='position:absolute; width:"+h+"; height:"+j+"'></div>");var k=a("#switchControlWrap").children().eq(e.contentDefaultNum);a("#switchControlWrap").append(k);f(k);i.hover(function(){a(this).addClass("hover")},function(){a(this).removeClass("hover");clearTimeout(b.t);b.t=setTimeout(function(){g(i,k)},e.checkRevertDefault_interval)});e.controlTo.hover(function(){a(this).addClass("hover")},function(){a(this).removeClass("hover");clearTimeout(b.t);b.t=setTimeout(function(){g(i,k)},e.checkRevertDefault_interval)});a.each(i.children(),function(){a(this).click(function(){var l=a(this).index();d(l)})});g(i,k)})}})(jQuery);
</script>
<style type="text/css">
#switchWrap{
list-style:none;
}
.switch{
width:90px;
height:20px;
background-color:#000;
color:#FFF;
text-align:center;
display:block;
float:left;
margin-left:5px;
cursor:pointer;
}
#contentWrape{
width:500px;
height:360px;
margin:auto;
border:solid 1px #123123;
position:relative;
overflow:hidden;
}
#contentWrape div{
width:500px;
height:360px;
float:left;
}
</style>
<ul id="switchWrap">
<li class="switch">滑门1</li>
<li class="switch">滑门2</li>
<li class="switch">滑门3</li>
<li class="switch">滑门4</li>
<li class="switch">滑门5</li>
<li class="switch">滑门6</li>
</ul>
<div id="contentWrape">
<div>默认内容区</div>
<div>内容块1</div>
<div>内容块2</div>
<div>内容块3</div>
<div>内容块4</div>
<div>内容块5</div>
<div>内容块6</div>
</div>
<script>
$('#switchWrap').switchControl({
slideSpeed: 300,
controlTo: $('#contentWrape'),
contentDefaultNum: 0,
checkRevertDefault_interval: 600
});
</script>
热心网友
默认显示 默认区块，其它两个区域隐藏，当鼠标移到第几个切换项上，相对应的第几个的内容显示，其它的隐藏，当鼠标没有移到任何1个切换上时，恢复到默认状态
