Question

我希望某些div在Javascript中移动屏幕，有点像this website（向下滚动），只有水平，或者像here（也是垂直的，但我会喜欢横向）< / p>

这是我的HTML：

<div id = "creators" class = "big-part">
    <h3>Creators</h3>
    <div class = "creator_name">
        <h4>Name</h4>
        <p>Text</p>
    </div>
    <div class = "creator_name">
        <h4>Name</h4>
        <p>Text</p>
    </div>
    <div class = "creator_name">
        <h4>Name</h4>
        <p>Text</p> 
    </div>
</div>

我的CSS：

.big-part {
    color: rgb(230, 230, 230);
    background-color: #3c3c91;
    border-radius: 21px;
    padding: 0.5% 1.5%; 
    margin-top: 2%;
}
.creator_name {
    background-color: rgb(230, 230, 230);
    height: 300px;
    color: #3c3c91;
    border-radius: 15px;
    padding: 1%;
}
.creator_name {
    width: 25%;
    display: inline-block;
    margin: 2% 2%;
}

和我在script标记中的javascript：

var creatorEl= document.getElementsByClassName("creator_name");

var startTime = new Date().getTime();
var moveTheDiv = function() {
    var currTime = new Date().getTime();
    var secondsElapsed = ((currTime - startTime)/1000);
    var newLeft = parseFloat(secondsElapsed) * 30 + "px";
    creatorEl.style.left = newLeft;
    window.requestAnimationFrame(walkTheCat);
};
moveTheDiv();

谢谢！

顺便说一下，只有当客户端/用户向下滚动并且div可见时，才会发生此动画。如果你愿意，你可以回答一半问题，我会帮助你。

修改：只有当我为每个ID添加一个ID并使用ID移动它时，我才能让它们移动，有没有办法同时移动它们但只使用一个类？

Answer 1

您可能会发现动画引擎Velocity.js很有帮助。 http://julian.com/research/velocity/（我与创作者无关）。

您实现类似于jQuery的.animate（）方法的函数。

以下是如何旋转div的示例：

NiftyThingUsingReader#close

try (
    java.util.zip.ZipFile zf =
         new java.util.zip.ZipFile(zipFileName);
    java.io.BufferedWriter writer = 
        java.nio.file.Files.newBufferedWriter(outputFilePath, charset)
) {
    // Enumerate each entry
    for (java.util.Enumeration entries =
                            zf.entries(); entries.hasMoreElements();) {
        // Get the entry name and write it to the output file
        String newLine = System.getProperty("line.separator");
        String zipEntryName =
             ((java.util.zip.ZipEntry)entries.nextElement()).getName() +
             newLine;
        writer.write(zipEntryName, 0, zipEntryName.length());
    }
}

希望有帮助，祝你好运！

如何让同一个班级的两个div在屏幕上移动？

1 个答案: