如何移動DIV水平

我試圖與圖像移動的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 code here： – 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

嗨，奈茲，我試着下面的腳本，我試圖水平移動圖像http://jsfiddle.net/bala2024/MzHmN/ – user1799052

你想自動移動圖像嗎？ –

當我們點擊一個加號按鈕，分度，圖像和減號按鈕顯示水平擴展，然後崩潰的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

嗨圖像不移動 – 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水平

回答

相關問題