Question

如何使用javascript创建自己的幻灯片页面？

见http://support.tweetboard.com/home/#installation 点击“推文”

Answer 1

这是一个非常简单的解决方案，使用jQuery的animate方法。（工作demo和下面的代码。）

<强> HTML

您需要三个基本元素：容器（#slideout），其内容（#slideout_contents）和切换按钮（#slideout_toggle）。

<body>
<div>Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents.</div>
<div id="slideout">
    <div id="slideout_contents">
        <a id="slideout_toggle">Open</a>
        <h1>Header</h1>
        <p>Some text.</p>
        <p>Some text.</p>
    </div>
</div>
</body>

<强> CSS

你需要绝对定位，以便它拥抱屏幕的左边缘。

body {
    padding: 0px;
    margin: 0px;
}
#slideout, #slideout_contents, #slideout_toggle {
    background: #000; /* to see it on a blank page */
    color: #fff;
    position: absolute;
    top: 0px;
}
#slideout_contents {
    left: -100px; /* adjust these */
    width: 100px;
    height: 300px;
}
#slideout_toggle {
    display: block;
    text-decoration: none;
    top: 50%;
    left: 100px;
    width: 50px;
    text-align: center;
}

JavaScript（jQuery）

jQuery的animate方法负责其余的工作。

$('#slideout_toggle').toggle(function(){
    $(this).html('Close');
    $('#slideout_contents').animate({'left': '0px'});
},function(){
    $(this).html('Open');
    $('#slideout_contents').animate({'left': '-100px'});
});

Answer 2

任意数量的网站都可以向您展示如何执行此操作。这是一个。

http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content_slide

使用javascript滑出页面？

2 个答案: