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程序设计有所帮助。

Javascript 相关文章推荐
JS中style属性
Oct 11 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
element ui table 增加筛选的方法示例
Nov 02 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
You might like
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Django ModelForm操作及验证方式
2020/03/30 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
2014年3.15团委活动总结
2014/03/16 职场文书
离婚财产处理协议书
2014/09/30 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
Go语言安装并操作redis的go-redis库
2022/04/14 Golang