html做点击或自动滚动图片,JS实现的点击按钮图片上下滚动效果示例

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

Title

*{

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;

}

• 1
• 2
• 3
• 4

window.οnlοad=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[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[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)

}

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

希望本文所述对大家JavaScript程序设计有所帮助。