我需要的是一个简单的标签系统,如果您在其内容上mouseDown
,您不会选择 html 文本,而是开始滑动标签。如果你滑动超过一半,它会假设你滑到下一个选项卡。如何用 jQuery 做这样的事情?
更新: 示例代码:
JS:
var $tabs = $('.tab');
var $contents = $('.content');
var contentWidth = $contents.eq(0).outerWidth(true);
var $slider;
var DURATION = 600;
var EASING_METHOD = 'easeInOutCubic';
$tabs.data('currentTabId', 1);
$slider = $contents.wrapAll('<div />').parent();
$slider.css({ 'width' : contentWidth * $contents.length,
'marginLeft' : 0 });
function calcMargin(distance) {
var margin = parseInt($slider.css('marginLeft').replace('px', ''), 10);
return margin + contentWidth * distance * -1;
}
function changeTab(tabId) {
var distance;
if($tabs.data('currentTabId') !== tabId) {
distance = tabId - $tabs.data('currentTabId');
$slider.stop(true, true);
$slider.animate(
{ 'marginLeft' : calcMargin(distance) },
{ duration : DURATION, easing : EASING_METHOD }
);
$tabs.data('currentTabId', tabId);
$tabs.removeClass('current');
$tabs.filter('#tab' + tabId).addClass('current');
}
}
$tabs.click(function() {
changeTab($(this).attr('id').slice(3));
});
HTML:
<div class='tabs'>
<div class='tab current' id='tab1'>tab1</div>
<div class='tab' id='tab2'>tab2</div>
<div class='tab' id='tab3'>tab3</div>
</div>
<div class='contents'>
<div class='content' id='content1'>
<div class='inner'>
content1
</div>
</div>
<div class='content' id='content2'>
<div class='inner'>
content2
</div>
</div>
<div class='content' id='content3'>
<div class='inner'>
content3
</div>
</div>
</div>
CSS:
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
}
.tabs {
}
.tab {
display: inline-block;
padding: 10px 30px;
border: 1px solid #333;
border-bottom: none;
border-radius: 15px 10px 0 0;
margin: 0 5px;
cursor: pointer;
}
.tab.current {
background: #90bfff;
}
.contents {
overflow: hidden;
width: 400px;
height: 300px;
border: 1px solid #333;
}
.content {
float: left;
margin-right: 10px;
width: 400px;
height: 300px;
}
.content .inner {
padding: 20px;
font-size: 35px;
}
以及如何进行的实时示例 it works Here .我要找的看起来like this (link provided by Trufa)但不仅适用于图像,还适用于 html 选项卡...并且在物理上可以更简单...=) 是否可以将提供的代码修改为我想要的任何东西附近的任何东西?
最佳答案
关于jquery - HTML 选项卡拖放 slider 示例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6008541/