Question

我对这种网络开发不是很熟悉。

基本上我要做的是有一个按钮（或键盘键），它会使图像出现，然后在屏幕上滚动并消失..

场景：按下按钮（键）10次，每秒1次。

出现10张图像，每张图像在屏幕宽度上滚动，然后消失。

我怎么能这样做？

我想获得的效果与http://www.vogue.co.uk/网站上使用的Konami代码复活节彩蛋非常相似。

我猜它是JavaScript或类似但我不知道如何写它。我也不知道jQuery中的脚本。

Answer 1

你走了：

$(function () {
    var images = [
        'http://placehold.it/100x100',
        'http://placehold.it/150x150',
        'http://placehold.it/200x250',
        'http://placehold.it/200x200'];
    var index = 0;
    $(document).on('keypress', function (event) {
        var c = String.fromCharCode(event.charCode);
        if(c === 'a') {
            var image = images[index];
            console.log(image);
            index = (index + 1) % images.length;
            $('<img style="position: fixed; bottom: 0; right: 0" src="' + image + '"/>')
                .appendTo(document.body)
                .animate({right: '200%'}, 2000, function() {
                    $(this).remove();
                });
        }
    })
});

按“a”键使阵列中的图像从右侧滑动。编辑阵列以使用您的图像。您需要在项目中包含jQuery。

这是一个小提琴：http://jsfiddle.net/acbabis/tD4FG/

Answer 2

我想出了一些东西。它可能不是最干净但是有效：

继承人HTML：

<!DOCTYPE html>
<html>
        <head>         
           <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
           <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>       
           <script src="popUpButton.js"></script>   
        </head>

        <body> 
                <div id="ToolBar" class="ToolbarDiv">
                <button onclick="popUpButton()" type="button">ButtonOne</button>
                </div>                            
        </body> 
</html>

这是javascript函数：

function popUpButton() {
        var popUpB = document.createElement('div');
        popUpB.className = 'ButtonClass';
        popUpB.id = 'ButtonID';
        var message = document.createElement('img');
        message.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
        popUpB.appendChild(message);                                           
        document.body.appendChild(popUpB);

        $("img").animate({ 
            marginLeft: "+=1000px",
        }, 3000 );
}

希望这就是你所需要的。

创建元素并独立滚动它们

2 个答案: