[英]How to move div horizontally
我正在嘗試將圖像從左到右移動到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;
}
JS
$(document).ready(function () {
$('#slideleft button').click(function () {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0
});
});
});
您將需要對主容器應用寬度。 請用下面一行替換它，然后在瀏覽器中簽入。
<div id="slideleft" class="slide" style="width:100px; margin:0 auto">
對外部空間使用邊距，對內部空間使用填充，請嘗試以下操作
<!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>
點擊下面的鏈接觀看現場演示... 點擊這里
<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>
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/
如何在javascript和/或css中向下滾動時水平移動div
[英]How to horizontally move a div as you scroll down in javascript and or css
在 Hover 鏈接將 Div 水平移動到當前懸停的鏈接 position
[英]On Hover Link move Div Horizontally to current hovered Link position
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.