gpt4 book ai didi

javascript - 如何水平移动div

转载 作者:行者123 更新时间:2023-11-28 12:16:17 25 4
gpt4 key购买 nike

我正在尝试将带图像的 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">

关于javascript - 如何水平移动div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19151842/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com