HTML5是當(dāng)前最流行的 web 開(kāi)發(fā)標(biāo)準(zhǔn)之一。其中，圖片是網(wǎng)頁(yè)中重要的元素之一，滑動(dòng)效果可以使網(wǎng)頁(yè)看起來(lái)更加生動(dòng)和動(dòng)態(tài)。本篇文章將介紹在HTML5中實(shí)現(xiàn)圖片上下滑動(dòng)效果的代碼。
首先，在HTML中添加一張圖片。代碼如下：
<img src="picture.jpg" alt="picture">接下來(lái)，使用CSS樣式為圖片添加`position:fixed`屬性讓其固定在頁(yè)面上，以便進(jìn)行滑動(dòng)功能的實(shí)現(xiàn)。代碼如下：
<style>
img{
position: fixed;
}
</style>然后，在 JavaScript 中添加滑動(dòng)效果的動(dòng)畫(huà)代碼。在 JavaScript 中，我們可以使用`setInterval()`函數(shù)來(lái)實(shí)現(xiàn)圖片的滑動(dòng)效果。下面是實(shí)現(xiàn)動(dòng)畫(huà)效果的代碼：<script>
var imgUrl = document.getElementsByTagName('img')[0];
var speed = 1;
var imgTop = 0;
var direction = 1;
setInterval(function(){
imgTop += speed * direction;
imgUrl.style.top = imgTop + 'px';
if(imgTop>=200){
direction =-1;
}else if(imgTop<=0){
direction = 1;
}
},10);
</script>代碼中，首先獲取頁(yè)面中的圖片元素；然后，定義滑動(dòng)速度（speed）、初始位置（imgTop）和滑動(dòng)方向（direction）。使用`setInterval()`函數(shù)循環(huán)執(zhí)行，通過(guò)改變圖片元素的`style.top`屬性值來(lái)實(shí)現(xiàn)圖片的上下滑動(dòng)效果。
最后，完整的 HTML 代碼如下：<html>
<head>
<style>
img{
position: fixed;
}
</style>
</head>
<body>
<img src="picture.jpg" alt="picture">
<script>
var imgUrl = document.getElementsByTagName('img')[0];
var speed = 1;
var imgTop = 0;
var direction = 1;
setInterval(function(){
imgTop += speed * direction;
imgUrl.style.top = imgTop + 'px';
if(imgTop>=200){
direction =-1;
}else if(imgTop<=0){
direction = 1;
}
},10);
</script>
</body>
</html>這段代碼將實(shí)現(xiàn)一個(gè)讓圖片在頁(yè)面上上下滑動(dòng)的效果。同時(shí)相信配合前言，在HTML5開(kāi)發(fā)中將感到毫無(wú)壓力。