我想使用 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>
请尽快给我建议。
最佳答案
问题指出解决方案需要使用纯 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>
基本算法是在单击某个按钮或链接时向要滑入/滑出的元素添加一个类(我还认为按钮在这里在语义上比 anchor 标记更适合链接网页)。
CSS 自动启动并更新滑动元素的 margin-top 使其在屏幕上可见。元素的过渡属性告诉浏览器将 margin-top 属性设置为动画两秒钟。
关于javascript - 如何仅使用javascript显示具有向下滑动效果的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27978294/