如何根据左侧和右侧的位置（）将默认滚动和标签移动为平行？ [英] How do I move the default scroll and tab as parallel based on the position() for left and right side?
本文介绍了如何根据左侧和右侧的位置（）将默认滚动和标签移动为平行？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
上。我的项目是使用html，css，jquery的Google Module Tab Application。在这里我在div中选择了10个标签。溢出标签指定为scroll.so默认滚动条被查看。为了我的项目完成，我调整左侧移动选项卡和默认滚动位置，并根据当前位置移动选项卡scrollLeft（）。左侧是如果我在第二面尝试它，有些波动即将到来。我如何配置我的标签和默认滚动位置在右侧平行并移动时移动波动。
Hai. My Project is Google Module Tab Application using html,css,jquery. here i take 10 tabs in a div. the overflow tabs as assigned as scroll.so the default scrollbar get viewed.For my Project completion,i am adjusted the left side moving tab and default scroll position and move the tab with scrollLeft() based on their current positions.The left side is fully working.If i am tried it on second side,somewhat fluctuations are coming.How do i configure my tab and default scroll position as parallel on right side and remove the fluctuations while moving.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/jquery.min.js"></script>
<script>
$(document).ready(function () {
var limit = $(".limit").innerWidth(); var Right,maxScrollLeft,count=0;
console.log("parent width" + limit);
var one, two; var left1;
//two = $(".limit").css({ "overflow-x": "auto" });
var p = $("#parent");
var counts = $(".limit").children().length;
var singletabwidth = $(".limit").children().width();
var total = counts * singletabwidth;
console.log("the total tabs width" + total);
console.log("single tab width " + singletabwidth);
var l = $(".limit");
var e,b1;
console.log("the total number of childrens are" + counts);
var drag_min_xpos, drag_max_xpos, original_xpos;
var CursorLeft, CursorRight,Left;
var tab_id; var li = $(".limit").width();
var button, button_id, parent_width, left, original_xpos, my_xpos, prev_button, drag_start_xpos;
var next_button, prev_button_pos, next_button_pos, drag = null;
var tabLeft, tabTop, tabRight, tabBottom,Top2,Left2,T,outsideLeft,outsideRight,outsideBottom,outsideTop,P;
var X, Y,CursorBottom,CursorTop,direction;
P = $("#parent").offset();
outsideLeft = P.left;
outsideRight = outsideLeft + $("#parent").width();
outsideTop = P.top;
outsideBottom = outsideTop + $("#parent").height();var b;
$(".button").mousedown(function (event) {
if (event.which === 1) {
tab_id = $(this).attr('data-tab');
$('.tab').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
button = $(this);
drag = $(this);
T = $(this).offset();
tabLeft = event.pageX - T.left;
if (count != 0) {
$(button).removeClass("current");
}
button_id = button.attr('id');
parent_width = button.parent().innerWidth();
left = parseInt(button.css('left'));
original_xpos = button.position().left;
Right = original_xpos + $(button).innerWidth;
drag_min_xpos = 0 - original_xpos;
drag_max_xpos = parent_width - original_xpos - button.outerWidth();
drag_start_xpos = event.clientX;
my_xpos = original_xpos;
Left = event.pageX - my_xpos;
$('.button').each(function (i) {
$(this).attr('data-order', (i + 1));
});
prev_button = button.prev('.button');
next_button = button.next('.button');
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
$(window).on('mousemove', function (event) {
X = event.clientX;
Y=event.clientY;
tab_id = $(this).attr('data-tab');
$('.tab').removeClass('current');
$(this).addClass('current');
var one = $(this);
$(button).addClass('drag');
direction = my_xpos > button.position().left ? 'left' : 'right';
var new_left = left + (event.clientX - drag_start_xpos);
my_xpos =button.position().left;
if (direction=='right') {
console.log("direction" + direction);
console.log(my_xpos);
console.log(original_xpos);
}
else
{
console.log("direction" + direction);
console.log("my x pos"+my_xpos);
console.log("original x pos"+original_xpos);
}
button.css({ left: new_left + 'px' });
if (new_left < drag_min_xpos) { button.css({ left: drag_min_xpos + 'px' }); }
if (new_left > drag_max_xpos) { button.css({ left: drag_max_xpos + 'px' }); }
if (direction == 'right') {
if (my_xpos > original_xpos) {
if (X > 1000) {
direction = 'right';
console.log("direction" + direction);
console.log("myx_pos" + my_xpos);
console.log("button.pos().left" + button.position().left);
//b1 = event.pageX - event.clientX;
b1 = my_xpos-prev_button_xpos-(event.pageX-event.clientX);
console.log("event.ClientX" + event.clientX);
console.log("b1"+b1);
console.log("pageX" + event.pageX);
$(l).scrollLeft(event.pageX+b1);
my_xpos = my_xpos + b1;
if (drag) {
tabLeft = event.pageX - T.left;
CursorLeft = event.pageX - tabLeft;
CursorRight = CursorLeft + $(button).width();
//CursorTop = event.pageY - Top2;
//CursorBottom = CursorTop + $(button).height();
if (((CursorTop >= outsideTop) && (CursorTop <= outsideBottom)) && ((CursorLeft >= outsideLeft) && (CursorLeft <= outsideRight)))
if ((((CursorRight) >= outsideLeft) && ((CursorRight) <= outsideRight)) && ((CursorBottom >= outsideTop) && ((CursorBottom) <= outsideBottom))) {
drag.offset({
//top: event.pageY - Top2,
left: event.pageX - tabLeft
});
}
}
if ((my_xpos + 50) > next_button_xpos) {
next_button.css({ left: (parseInt(next_button.css('left')) - next_button.outerWidth(true)) + 'px' });
var tmp_order = next_button.attr('data-order');
next_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
prev_button = next_button;
next_button = next_button.nextAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
}
$(button).offset({
left: event.clientX,
//top: event.pageY
});
if ((my_xpos + 50) > next_button_xpos) {
next_button.css({ left: (parseInt(next_button.css('left')) - next_button.outerWidth(true)) + 'px' });
var tmp_order = next_button.attr('data-order');
next_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
prev_button = next_button;
next_button = next_button.nextAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
}
} else if (direction == 'left') {
if (my_xpos < original_xpos) {
if (X>=-1000) {
console.log(direction);
direction = 'left';
b = event.pageX + event.clientX;
console.log("event.clientX" + event.clientX);
console.log("event.pageX" + event.pageX);
console.log("b" + b);
$(l).scrollLeft(event.pageX + b);
my_xpos = my_xpos + b;
if (drag) {
CursorLeft = event.pageX - tabLeft;
CursorRight = CursorLeft + $(button).width();
//CursorTop = event.pageY - Top2;
//CursorBottom = CursorTop + $(button).height();
if (((CursorTop >= outsideTop) && (CursorTop <= outsideBottom)) && ((CursorLeft >= outsideLeft) && (CursorLeft <= outsideRight)))
if ((((CursorRight) >= outsideLeft) && ((CursorRight) <= outsideRight)) && ((CursorBottom >= outsideTop) && ((CursorBottom) <= outsideBottom))) {
drag.offset({
//top: event.pageY - Top2,
left: event.pageX - tabLeft
});
}
}
if (my_xpos < (prev_button_xpos + 50)) {
prev_button.css({ left: (parseInt(prev_button.css('left')) + prev_button.outerWidth(true)) + 'px' });
var tmp_order = prev_button.attr('data-order');
prev_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
next_button = prev_button;
prev_button = prev_button.prevAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
}
$(button).offset({
left: event.clientX,
//top: event.pageY
});
if (my_xpos < (prev_button_xpos + 50)) {
prev_button.css({ left: (parseInt(prev_button.css('left')) + prev_button.outerWidth(true)) + 'px' });
var tmp_order = prev_button.attr('data-order');
prev_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
next_button = prev_button;
prev_button = prev_button.prevAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
}
}
});
$(window).on('mouseup', function (event) {
dragging = null;
$(button).removeClass("active");
button = null;
if (event.which === 1) {
count++;
$('.button').removeClass('drag');
$(window).off('mouseup mousemove');
one = null; two = null;
$('.button').each(function () {
var this_order = parseInt($(this).attr('data-order'));
var prev_order = $(this).siblings('.button[data- order="' + (this_order - 1) + '"]');
if (prev_order.length > 0) { $(this).insertAfter(prev_order); }
});
$('.button').css('left', '0'); $('.button').removeAttr('data-order');
}
});
}
});
});
</script>
.limit
{
white-space:nowrap;
overflow-y:hidden;
overflow-x:scroll;
position:relative;
}
#parent {
/*/*position:relative;*/
/*margin: 20px;
width: 800px;
height: 40px;*/
position:relative;
}
.button {
position:relative;
display: inline;
width: 170px;
height: 70px;
background-color:lightgray;
font-size:large;
-webkit-transform: perspective(100px)rotateX(30deg);
-moz-transform: perspective(100px)rotateX(30deg);
}
.button:hover {
cursor: default;
position:relative;
}
.button:active
{
cursor:move;
z-index:40;
background-color:lightpink;
}
.button.drag {
z-index: 99;
background-color:magenta;
}
.pic
{
height:400px;
width:700px;
}
button.current{
background-color:yellowgreen;
}
.tab-content{
margin-top:40px;
display: none;
background-color:lightgoldenrodyellow;
height:350px;
width:700px;
}
.tab-content.current{
display: inherit;
position:absolute;
}
</head>
<body>
<div id="parent" class="parent">
<div class="limit">
<button data-tab="1" class="button current " >Car 1</button>
<button data-tab="2" class="button">Car 2</button>
<button data-tab="3" class="button">Car 3</button>
<button data-tab="4" class="button">Car 4</button>
<button data-tab="5" class="button">Car 5</button>
<button data-tab="6" class="button">Computer</button>
<button data-tab="7" class="button">Message</button>
<button data-tab="8" class="button">Nature</button>
<button data-tab="9" class="button">Power</button>
</div>
<div id="1" class="tab-content current"> Car 1</div>
<div id="2" class="tab-content">Car 2</div>
<div id="3" class="tab-content"> Car 3</div>
<div id="4" class="tab-content">Car 4</div>
<div id="5" class="tab-content">Car 5</div>
<div id="6" class="tab-content">Computer</div>
<div id="7" class="tab-content">Message</div>
<div id="8" class="tab-content">Nature</div>
<div id="9" class="tab-content">Power</div>
</div>
</body>
</html>
What I have tried:
Scroll move left side:-
1.I took the (event.pageX-event.clientX) values as b.
2.Move the scroll to left side with parent container $(l).ScrollLeft(event.pageX+b).
3.The scroll moved successfully on left side.
Right side:-
1.For Right side i am follow the same scenario,but i get error on both left and right?how do correctly move the scroll and tab as parallel positions both on left and right ps
What I have tried:
Scroll move left side:-
1.I took the (event.pageX-event.clientX) values as b.
2.Move the scroll to left side with parent container $(l).ScrollLeft(event.pageX+b).
3.The scroll moved successfully on left side.
Right side:-
1.For Right side i am follow the same scenario,but i get error on both left and right?how do correctly move the scroll and tab as parallel positions both on left and right ps
推荐答案
(document).ready(function () {
var limit =
(document).ready(function () { var limit =
(\".limit\").innerWidth(); var Right,maxScrollLeft,count=0;
console.log(\"parent width\" + limit);
var one, two; var left1;
//two =
(".limit").innerWidth(); var Right,maxScrollLeft,count=0; console.log("parent width" + limit); var one, two; var left1; //two =
(\".limit\").css({ \"overflow-x\": \"auto\" });
var p =
(".limit").css({ "overflow-x": "auto" }); var p =
这篇关于如何根据左侧和右侧的位置（）将默认滚动和标签移动为平行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
