#javascript #html #jquery #css3 #jquery_ui
И так у нас есть терезы , к ним мы будем вешать блоки ( реализовал через draggable)
!Как сделать так чтоб , когда вешаем на терезы блок они опускались в низ, когда добавляли
вес с другой стороны , тогда они приводились в равновесия!
$(".state").draggable();
$('.obj_block1').draggable();
$(".top").draggable();
.state {
background-image: url(../img/Object1.png);
background-repeat: no-repeat;
height: 401px;
width: 300px;
cursor: pointer;
}
.top {
background-image: url(93bus.png);
background-repeat: no-repeat;
height: 40px;
width: 400px;
cursor: pointer;
}
.obj_block1 {
background-image: url(../img/block1.png);
background-repeat: no-repeat;
height: 70px;
width: 70px;
cursor: pointer;
}
Ответы
Ответ 1
$.fn.animateRotate = function(angleFrom, angleTo, duration, easing, complete) {
var args = $.speed(duration, easing, complete);
return this.each(function(i, e) {
args.complete = $.proxy(args.complete, e);
args.step = function(now) {
$.style(e, 'transform', 'rotate(' + now + 'deg)');
};
$({ deg: angleFrom }).animate({ deg: angleTo }, args);
});
};
$.fn.animateCircularPath = function(angleFrom, angleTo, radius, offsetX, offsetY,
duration, easing, complete) {
var args = $.speed(duration, easing, complete);
return this.each(function(i, e) {
args.complete = $.proxy(args.complete, e);
args.step = function(now) {
var rad = now * Math.PI / 180;
$(e).css({
top: Math.sin(rad) * radius + offsetY,
left: (1 + Math.cos(rad)) * radius + offsetX
});
};
$({ deg: angleFrom }).animate({ deg: angleTo }, args);
});
};
var left = $()
, right = $()
, speed = 4000
, currentAngle = 0
, dropAreas = $('.drop-area')
, dropAreaLeft = $('.drop-area-left')
, dropAreaRight = $('.drop-area-right')
, level = $('.level')
, easing = 'easeOutElastic'
, levelRadius = 80
, halfLevelWeight = 50
, plummetWeight = 100
, plummetOffsetTop = parseFloat(dropAreas.css('top'))
, plummetDistance = 10;
function animate() {
var leftWeight = halfLevelWeight + left.length * plummetWeight
, rightWeight = halfLevelWeight + right.length * plummetWeight
, angle = (rightWeight - leftWeight) / (rightWeight + leftWeight) * 90;
level.animateRotate(currentAngle, angle, speed, easing);
var offset = plummetOffsetTop;
left.each(function() {
$(this).animateCircularPath(180 + currentAngle, 180 + angle, levelRadius, 0,
offset, speed, easing);
offset += plummetDistance + plummetOffsetTop;
});
offset = plummetOffsetTop;
right.each(function() {
$(this).animateCircularPath(currentAngle, angle, levelRadius, 0, offset, speed,
easing);
offset += plummetDistance + plummetOffsetTop;
});
offset = plummetOffsetTop + left.length * (plummetDistance + plummetOffsetTop);
dropAreaLeft.animateCircularPath(180 + currentAngle, 180 + angle, levelRadius,
0, offset, speed, easing);
offset = plummetOffsetTop + right.length * (plummetDistance + plummetOffsetTop);
dropAreaRight.animateCircularPath(currentAngle, angle, levelRadius, 0, offset,
speed, easing);
currentAngle = angle;
}
$('.plummet').draggable({
revert: 'invalid',
start: function(e, ui) {
dropAreas.show();
},
stop: function(e, ui) {
dropAreas.hide();
}
});
dropAreas.droppable({
drop: function(e, ui) {
ui.draggable.css({ left: $(this).css('left'), top: $(this).css('top') }).draggable('disable');
if ($(this).hasClass('drop-area-left')) {
left = left.add(ui.draggable);
}
else {
right = right.add(ui.draggable);
}
animate();
}
});
.container {
height: 300px;
left: 100px;
position: absolute;
top: 100px;
width: 200px;
}
.container * {
box-sizing: border-box;
}
.base {
border: 1px solid;
bottom: 0;
height: 10px;
left: 50px;
position: absolute;
width: 100px;
}
.stand {
border: 1px solid;
height: 300px;
position: absolute;
left: 95px;
top: 0;
width: 10px;
}
.level {
border: 1px solid;
height: 10px;
left: 0;
position: absolute;
top: 0;
width: 200px;
}
.drop-area {
border: 1px dashed;
display: none;
height: 40px;
position: absolute;
top: 40px;
width: 40px;
}
.drop-area-left {
left: 0;
}
.drop-area-right {
right: 0;
}
.plummet {
border: 1px solid;
bottom: 0;
cursor: pointer;
height: 40px;
position: absolute;
width: 40px;
}
.plummet-1 { right: 0; }
.plummet-2 { right: -50px; }
.plummet-3 { right: -100px; }
.plummet-4 { right: -150px; }
.ui-droppable-hover {
border: 2px solid;
}
.ui-draggable-disabled {
cursor: default;
}
