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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
node中koa中间件机制详解
Aug 22 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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
PHP生成便于打印的网页
2006/10/09 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
PHP实现递归的三种方法
2020/07/04 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
python zip文件 压缩
2008/12/24 Python
web.py获取上传文件名的正确方法
2014/08/26 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Python实现网站表单提交和模板
2019/01/15 Python
python selenium循环登陆网站的实现
2019/11/04 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
奉献演讲稿范文
2014/05/21 职场文书
毕业大学生自荐信
2014/06/17 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js