CSS是网页开发中很重要的一部分,它可以控制页面的样式和布局,但是对于一些特定的效果,CSS并不能完全实现,比如滑动效果。那么,如何实现滑动效果呢?本文将介绍两种方法。 方法一:使用JavaScrip
<script>
function slide(element, distance, duration) {
var start = element.offsetLeft;
var end = start + distance;
var speed = distance / duration;
var startTime = new Date().getTime();
var timer = setInterval(function() {
var now = new Date().getTime();
var timePassed = now - startTime;
var distancePassed = speed * timePassed;
if (distancePassed >= distance) {
clearInterval(timer);
element.style.left = end + 'px';
} else {
element.style.left = start + distancePassed + 'px';
}
}, 10);
}
var box = document.getElementById('box');
var btn = document.getElementById('btn');
btn.onclick = function() {
slide(box, 100, 500);
}
</script>
<p>这是一个可以使盒子向右滑动100像素的按钮:</p>
<div id="box" style="width: 100px; height: 100px; background-color: blue; position: absolute; left: 0;"></div>
<button id="btn">滑动</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>这是一个可以使盒子向右滑动100像素的按钮:</p>
<div id="box" style="width: 100px; height: 100px; background-color: blue; position: absolute; left: 0;"></div>
<button id="btn">滑动</button>
<script>
$('#btn').click(function() {
$('#box').animate({left: '+=100px'}, 500);
});
</script>
粉丝
0
关注
0
收藏
0