JS实现的点击按钮图片上下滚动效果示例

2019-11-19 12:12:14

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现的点击按钮图片上下滚动效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{      margin: 0;      padding:0;      list-style: none;    }    .big{      width: 200px;      height: 200px;      margin:100px auto;    }    ul{      width: 100px;      height: 100px;      border: 1px solid black;      position: relative;      overflow: hidden;    }    li{      width: 100px;      height: 100px;      line-height: 100px ;      text-align: center;    }    .color1{      background: red;      position: absolute;    }    .color2{      background: yellow;      position: absolute;    }    .color3{      background: pink;      position: absolute;    }    .color4{      background: green;      position: absolute;    }    .input1{      width: 30px;      height: 30px;      margin: 10px ;      position: absolute;      top:150px ;      left:550px;    }    .input2{      width: 30px;      height: 30px;      margin: 10px ;      position: absolute;      top:150px ;      left:590px;    }  </style></head><body><div class="big"><ul>  <li class="color1" style="top:0;">1</li>  <li class="color2" style="top:100px;">2</li>  <li class="color3" style="top:200px;">3</li>  <li class="color4" style=" top:-100px;">4</li></ul>  <input class="input1" type="button" value="1">  <input class="input2" type="button" value="2"></div><script>  window.onload=function () {    var oIpt1=document.getElementsByTagName("input")[0];    var oIpt2=document.getElementsByTagName("input")[1];    var allColor=document.getElementsByTagName("li");    oIpt2.addEventListener("click",function () {      for(var i=0;i<allColor.length;i++){        allColor[i].style.top=parseFloat(allColor[i].style.top)-100+"px";        allColor[i].style.transition=1+"s"            if(allColor[i].style.top==-300+"px"){              allColor[i].style.top=100+"px"              allColor[i].style.transition=0+"s"            }      }    },false)    oIpt1.addEventListener("click",function () {      for(var i=0;i<allColor.length;i++){        allColor[i].style.top=parseFloat(allColor[i].style.top)+100+"px";        allColor[i].style.transition=1+"s"        if (allColor[i].style.top==400+"px"){          allColor[i].style.top=0+"px"          allColor[i].style.transition=0+"s"        }      }    },false)  }</script></body></html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.VeVB.COm/code/HtmlJsRun测试上述代码，可得如下运行结果：