编程 Javascript

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

Posted in Javascript onJanuary 28, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码，可得如下运行结果：

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

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

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

- Author -

s_psycho

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

超级兔子让浮动层消失的前因后果

Mar 09 Javascript

JQuery autocomplete 使用手册

Apr 01 Javascript

深入理解javascript动态插入技术

Nov 12 Javascript

利用js(jquery)操作Cookie的方法说明

Dec 19 Javascript

JavaScript实现简单图片滚动附源码下载

Jun 17 Javascript

js实现基于正则表达式的轻量提示插件

Aug 29 Javascript

JavaScript cookie详解及简单实例应用

Dec 31 Javascript

jQuery获取Table某列的值（推荐）

Mar 03 Javascript

javascript中mouseenter与mouseover的异同

Jun 06 Javascript

jQuery实现高级检索功能

May 28 jQuery

Angular8 实现table表格表头固定效果

Jan 03 Javascript

JavaScript find()方法及返回数据实例

Apr 30 Javascript

vue-cli3 项目从搭建优化到docker部署的方法

Jan 28 #Javascript

JavaScript 判断iPhone X Series机型的方法

Jan 28 #Javascript

JS实现二维数组元素的排列组合运算简单示例

Jan 28 #Javascript

新手快速上手webpack4打包工具的使用详解

Jan 28 #Javascript

jQuery实现的网站banner图片无缝轮播效果完整实例

Jan 28 #jQuery

详解项目升级到vue-cli3的正确姿势

Jan 28 #Javascript

jQuery实现合并表格单元格中相同行操作示例

Jan 28 #jQuery