HTML滑動特效是Web開發中的一個重要組成部分，可以讓網頁更加生動、充滿活力。本文將為大家介紹一些常用的HTML滑動特效代碼，幫助學習者快速入手。 1. 垂直滑動 使用css樣式的scrollTop屬性，可以控制元素在垂直方向上的滾動，代碼如下：

function scrollElement(elementId, speed) {
const element = document.getElementById(elementId);
let scrollTop = element.scrollTop + speed;
element.scrollTop = scrollTop;
setTimeout(() =>{
scrollElement(elementId, speed);
}, 100);
}
// 調用函數
scrollElement('your-element', 5);

2. 水平滑動 使用css樣式的scrollLeft屬性，可以控制元素在水平方向上的滾動，代碼如下：

function scrollElement(elementId, speed) {
const element = document.getElementById(elementId);
let scrollLeft = element.scrollLeft + speed;
element.scrollLeft = scrollLeft;
setTimeout(() =>{
scrollElement(elementId, speed);
}, 100);
}
// 調用函數
scrollElement('your-element', 5);

3. 無縫滾動 使用jQuery庫的animate屬性，可以讓元素在滾動時形成無縫滾動的效果，代碼如下：

$(function(){
setInterval(function(){
let firstLi = $('.list ul li').eq(0);
let height = firstLi.height();
firstLi.animate({marginTop: -height}, 500, function(){
firstLi.css('marginTop', 0).appendTo($('.list ul'));
});
}, 2000);
});

4. 鼠標滾輪滑動 使用jQuery庫的mousewheel事件，可以讓鼠標滾輪控制元素在垂直方向上的滑動，代碼如下：

$(document).ready(function(){
let delta = 0;
let miceDrag = false;
$('.container').on('mousewheel', function(event){
delta = event.originalEvent.wheelDelta;
return false;
});
$(document).on('mousedown', function(){
miceDrag = true;
}).on('mouseup', function(){
miceDrag = false;
});
setInterval(function(){
if(!miceDrag){
let scrollTop = $('.container').scrollTop();
$('.container').scrollTop(scrollTop + delta);
}
}, 10);
});

以上就是一些常用的HTML滑動特效代碼了，它們可以讓網頁更加吸引人，同時也能為網頁設計師提供更多的創作空間。學習者可以根據自己的需求靈活運用這些代碼，創造出更加出色的作品。