Как переместить Div по горизонтали

Я пытаюсь поле сНа с движением изображений слева направо,Как переместить Div по горизонтали

Я попробовал другой сценарий: http://jsfiddle.net/bala2024/MzHmN/

Вот HTML код

<!DOCTYPE html> 
<html>  
    <head></head>  
    <body style> 
     <div id="slideleft" class="slide"> 
      <button>slide it</button> 
      <div class="inner">Slide to the left</div> 
      <div style="width:50px; height:50px"> 
       <img src="sceen.jpg"> 
      </div> 
     </div> 
    </body> 

</html>

CSS

.slide { 
    position: relative; 
    background-color: gray; 
    height: 100px; 
    width: 500px; 
    overflow: hidden; 
} 
.slide .inner { 
    position: absolute; 
    left: -500px; 
    bottom: 0; 
    background-color:#e3e3e3; 
    height: 30px; 
    width: 500px; 
}

$(document).ready(function() { 
    $('#slideleft button').click(function() { 
     var $lefty = $(this).next(); 
     $lefty.animate({ 
      left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0 
     }); 
    }); 
});

источник

2013-10-03 user1799052

С CSS? Существует относительное и абсолютное позиционирование. Вы также можете использовать отступы/поля для управления элементом. –

Когда вы пытаетесь переместить поле div слева направо? нажатие кнопки? и какой div вы имеете в виду? потребуется некоторое время, чтобы объяснить это ясно. –

css код здесь: – user1799052

-1

CSS:

div.inner{ 
background:black; 
margin-left:0; 
width:100px; 
animation:sample 2s; 
-webkit-animation:sample 2s; 
} 
keyframes sample{ 
from{margin-left:100%;} 
to{margin-left:0%;} 
} 
@-webkit-keyframes sample{ 
from{margin-left:100%;} 
to{margin-left:0%;} 
}

скрипка: http://jsfiddle.net/apRMU/17/

источник

2013-10-03 06:06:13

Привет, Naiz, я попробовал следующий скрипт, я пытаюсь перемещаться по горизонтали с изображением http://jsfiddle.net/bala2024/MzHmN/ – user1799052

Вы хотите переместить изображение автоматически? –

, когда мы нажимаем кнопку «плюс», div расширяем горизонтально с изображением и отображением кнопки «минус», затем сворачиваем div и показываем только изображение с помощью кнопки «плюс». Благодарю. – user1799052

Вам нужно будет применить ширину основного контейнера. Пожалуйста, замените его на строку ниже и проверьте в своем браузере.

<div id="slideleft" class="slide" style="width:100px; margin:0 auto">

источник

2013-10-03 06:02:21

Это не дает ответа на вопрос. Чтобы критиковать или запросить разъяснения у автора, оставьте комментарий ниже своего сообщения - вы всегда можете прокомментировать свои собственные сообщения, и как только у вас будет достаточно [репутации] (http://stackoverflow.com/help/whats-reputation), вы будете быть в состоянии [прокомментировать любое сообщение] (http://stackoverflow.com/help/privileges/comment). –

@ Floradu88: Pritesh Gajjar просто не форматировал «нижнюю строку» правильно, поэтому он был скрыт в тексте. –

использование запаса для космического пространства и дополнения для внутреннего пространства попробовать этот

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body style> 
    <div id="slideleft" class="slide"> 
     <button>slide it</button> 
     <div class="inner">Slide to the left</div> 
     <div style="width:50px; height:50px; margin-left: 100px;"><img src="sceen.jpg"> 
     </div>   
    </div> 
</body> 
</html>

источник

2013-10-03 06:04:30 user2727841

Hi image not moving – user1799052

Нажмите на ссылку, чтобы посмотреть в прямом эфире демонстрационные ... Click Here

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Animation test</title> 
<style> 

</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#b").animate({left: "+=500"}, 2000); 
    $("#b").animate({left: "-=300"}, 1000); 
}); 

</script> 
</head> 

<body> 
<div style="position:relative"> 
    <div id="b" style="position:absolute;">B</div> 
</div> 
</body> 
</html>

источник

2013-10-03 07:07:14 navin2013

Как переместить Div по горизонтали

ответ

Смежные вопросы