修改

Question

我正在尝试这个＆＃34;透明盒中的文字＆＃34;使用CSS。

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
  width: 500px;
  height: 250px;
  background: url(image.jpg) repeat;
  border: 2px solid black;
}
div.transbox
{
  width: 400px;
  height: 30px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
  text-align:center;
  margin: 4px 0px;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body><div class="background" style="display:inline-block">
<div class="transbox" style="display:inline-block">
<p>This is my first position</p>
</div>
</div>
</body>
</html>

如何在5秒延迟后再次自动更改透明框和文本的位置，然后再次将其循环播放？查看此截图图片：

Image 1 for position1 :http://i57.tinypic.com/x3detu.jpg

Image 2 for position 2:http://i60.tinypic.com/ipnw5v.png

Image 3 for position 3:http://i58.tinypic.com/2lnff3t.png

Loop this back to Position1

修改

根据您的建议添加了代码，但它不起作用::

<!DOCTYPE html>
<html>
<head>

<style>
div.background
{
  width: 500px;
  height: 250px;
  background: url(banner.jpg) no-repeat;
  border: 2px solid black;
}
div.transbox
{
  width: 400px;
  height: 30px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
  text-align:center;
  margin: 4px 0px;
  font-weight: bold;
  color: #000000;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>
<script>
    (function($) {
        var transbox = $('div.transbox');

        (function runIt() {
            transbox
            .delay(1500).animate({"top": "70px"}, 1000)
            .delay(500).animate({"top": "160px"}, 1000)
            .delay(500).animate({"top": ""}, 200, function () {runIt();});
        }());
    }());
</script>


<div class="background" style="display:inline-block">
<div class="transbox" style="display:inline-block">
<p>This is my first position</p>
</div>
</div>

</body>
</html>

Answer 1

jQuery让这很简单：

var transbox = $('div.transbox');

(function runIt() {
    transbox
    .delay(1500).animate({"top": "70px"}, 1000)
    .delay(500).animate({"top": "160px"}, 1000)
    .delay(500).animate({"top": ""}, 200, function () {runIt();});
}());

请注意，为了实现此功能，您还需要为position: relative

的css添加div.transbox

http://jsfiddle.net/pabo/Gj6tN/

如果您不想要动画效果，可以将宽松设置为0（宽松为1000,1000和200，定义动画应该花多长时间）。或者您可以将.animate()更改为.css()，但这不会进行回调，因此您必须连锁另一个电话。

修改

您可以将所需的任何css规则传递给.animate()方法。我已经展示了水平移动和垂直移动的示例。我已经添加了更改文本。

http://jsfiddle.net/pabo/YuJ8K/

编辑2

你需要jQuery。从您的问题标签中，我假设您已经在使用它，但也许您不是。包含jQuery的最简单方法是使用google托管的版本。

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

然后，您需要将javascript代码包装在脚本标记中以及在页面就绪后将触发的某种事件中。您添加到

中的任何javascript（jQuery或其他）

$("document").ready(function() { //code here });

在页面准备就绪后，将会执行

。

<body>
    <script>
    $("document").ready(function() {
        var transbox = $('div.transbox');

        (function runIt() {
            transbox
            .delay(1500).animate({"top": "70px"}, 1000)
            .delay(500).animate({"top": "160px"}, 1000)
            .delay(500).animate({"top": ""}, 200, function () {runIt();});
        }());
    });
    </script>

    ....rest of html....
</body>

如何在延迟后更改文本并将其循环回来？

修改

1 个答案:

修改

编辑2