HTML5向上滾動圖片的代碼
HTML5是一個強大的網頁制作語言，它可以實現多種效果，包括向上滾動圖片。這種效果可以為您的網站增添一絲活力和現代感。下面我們將介紹如何使用HTML5代碼實現向上滾動圖片的效果。
首先，在HTML文檔的head標簽中引入jQuery庫：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head><body>
<div id="scroll-box">
<ul id="img-list">
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
</ul>
</div>
</body><script>
$(document).ready(function(){
var box = $("#scroll-box");
var height = box.height();
var intervalId = setInterval(scroll, 3000);
box.hover(function(){
clearInterval(intervalId);
}, function(){
intervalId = setInterval(scroll, 3000);
});
function scroll(){
var first = $("#img-list li:first-child");
var height = first.height();
first.animate({marginTop: -height +"px"}, 1000, function(){
first.css("marginTop", 0).appendTo("#img-list");
});
}
});
</script>上一篇上傳文件的css樣式
下一篇上傳文件樣式css