HTML是網頁開發的基礎，常常用于實現頁面的各種效果。其中，點擊滑動效果是一種常見的交互效果。下面來介紹HTML如何實現點擊滑動效果的代碼。
<html>
<head>
<title>點擊滑動效果</title>
<style>
.box{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.button{
width:50px;
height:50px;
background-color:#f00;
position:absolute;
right:0;
top:75px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="button" onclick="slide()"></div>
</div>
<script>
function slide(){
var box=document.querySelector(".box");
var button=document.querySelector(".button");
var width=box.offsetWidth;
var timer=null;
clearInterval(timer);
timer=setInterval(function(){
width--;
box.style.width=width+"px";
if(width==50){
clearInterval(timer);
button.style.right="150px";
button.innerHTML="<";
button.onclick=function(){
slideBack();
}
}
},10);
}
function slideBack(){
var box=document.querySelector(".box");
var button=document.querySelector(".button");
var width=box.offsetWidth;
var timer=null;
clearInterval(timer);
timer=setInterval(function(){
width++;
box.style.width=width+"px";
if(width==200){
clearInterval(timer);
button.style.right="0";
button.innerHTML="";
button.onclick=function(){
slide();
}
}
},10);
}
</script>
</body>
</html>上面的代碼中，通過HTML、CSS和JavaScript結合實現了點擊滑動效果。其中，通過CSS設置了盒子的基本樣式，通過JavaScript實現了點擊后盒子從200px滑動到50px，同時按鈕的方向和功能也隨著滑動的變化而變化。
上一篇python 集合用途
下一篇python 集合理解