Question

我想使用javascript（而不是jquery）来显示带有滑动效果的div。

这是我的HTML代码： -

<div class="title-box"><a href="#">show text</a></div>
<div class="box"><span class="activity-title">our regions bla bla</span></div>

请尽快告诉我。

Answer 1

问题表明，解决方案需要使用纯JavaScript而不是jQuery，但它并不排除使用CSS。我认为CSS是最好的方法，因为幻灯片效果是表现。

请参阅http://jsfiddle.net/L9s13nhf/

<html><head>
  <style type="text/css">
#d {
    height: 100px;
    width: 100px;
    border: 1px solid red;
    margin-top: -200px;
    transition: margin-top 2s;
}

#d.shown {
    margin-top: 100px;
}
  </style>
</head>
<body>
  <button id="b">Toggle slide</button>
  <div id="d">Weeeeeeee</div>

  <script type="text/javascript">
  var b = document.getElementById('b');
  var d = document.getElementById('d');
  b.addEventListener('click', function() {
      d.classList.toggle('shown');
  });
  </script>
</body></html>

基本算法是在单击某个按钮或链接时向要插入/滑出的元素添加一个类（我还认为按钮在语义上比锚标记更合适。更多用于链接网页）。

CSS会自动启动并更新滑动元素的margin-top以在屏幕上显示。元素的transition属性告诉浏览器为margin-top属性设置动画两秒钟。

Answer 2

您可以尝试以下代码：

Working Demo

document.getElementById('bar').onclick = (function()
{


var that, interval, step = 20,
id = document.getElementById('foo'),
handler = function()
{
    that = that || this;
    that.onclick = null;
    id = document.getElementById('foo');
    interval =setInterval (function()
    {
        id.style.top = (parseInt(id.style.top, 10) + step)+ 'px';

        if (id.style.top === '0px' || id.style.top === '400px')
        {
            that.onclick = handler;
            clearInterval(interval);
            if (id.style.top === '400px')
            {
                id.style.display = 'none';
            }
            step *= -1;
        }
        else
        {
            id.style.display = 'block';
        }
    },100);
};
return handler;
}());

Answer 3

您可以参考以下内容：

<div class="title-box">
      <a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">show text</a>
</div>
<div class="box" id="slidedown_demo" style="width:100px; height:80px; background:#ccc; text-align:center;">
     <span class="activity-title">our regions bla bla</span>
</div>

如何使用javascript显示具有向下滑动效果的div

3 个答案: