左右按钮控制移动的demo

最新推荐文章于 2023-10-05 16:12:59 发布
最新推荐文章于 2023-10-05 16:12:59 发布
阅读量571 收藏
点赞数 1
分类专栏： 案例测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuzi007a/article/details/118758972
版权

大家好，我是梅巴哥er。

和轮播图相同的地方是，都可以用到节流阀，

不同的地方是，轮播图可以一直点击其中一个按钮，会一直切换，
而这种左右按钮的功能，左移到一定位置就不能再移动，右移到一定位置也不能再移动。

  • 本案例是点击左侧按钮，内容向左侧移动，点击右侧按钮，内容向右移动的。
  • 如果需要点击左侧按钮，内容向右侧移动，点击右侧按钮，内容向左移动， 调用函数的时候，把按钮反着写即可。最后有调用案例。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="demo.css">
</head>
<body>
  <div class="box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <button class="leftBtn">左按钮</button>
  <button class="rigBtn">右按钮</button>
  <script src="demo.js"></script>
</body>
</html>

/*demo.css*/
* {
  padding: 0;
  margin: 0;
}
ul li {
  list-style-type: none;
}
.box {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: pink;
  margin-left: 200px;
  margin-top: 50px;
}
.box ul {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.box ul li {
  float: left;
  width: 100px;
  height: 100%;
}
.leftBtn {
  margin-left: 240px;
}

/*demo.js*/
window.addEventListener('load', function() {
  var log = console.log || window.console.log;
  var $ = document.querySelector.bind(document);

  var leftBtn = $('.leftBtn');
  var rigBtn = $('.rigBtn');
  var boxUl = $('.box').querySelector('ul');
  var flag1 = true;
  var flag2 = true;
  
  boxUl.style.width = boxUl.children[0].offsetWidth * boxUl.children.length + 'px';
  leftBtn.onclick = function() {
    log(1, flag1);
    if(flag1) {
      flag1 = false;
      if(boxUl.offsetLeft <= boxUl.children[0].offsetWidth * -3) {
        boxUl.style.left = boxUl.children[0].offsetWidth * -3 + 'px';
        flag2 = true;
      } else {
        animate(boxUl, boxUl.offsetLeft, boxUl.offsetLeft - boxUl.children[0].offsetWidth, null, function(){flag1 = true;});
      }
    }
  }
  rigBtn.onclick = function() {
    log(2, flag2);
    if(flag2) {
      flag2 = false;
      if(boxUl.offsetLeft >= 0) {
        boxUl.style.left = 0;
        flag1 = true;
      } else {
        animate(boxUl, boxUl.offsetLeft, boxUl.offsetLeft + boxUl.children[0].offsetWidth, null, function(){flag2 = true;});
      }
    }
  }

  function animate(obj, start, end, unit, cb) {
    var step = (end - start) / 10;
    var n = 1;
    var unit = unit || 'px';
    clearInterval(timer)
    function move() {
      obj.style.left = start + step * n + unit;
      if(obj.style.left === end + unit) {
        clearInterval(timer);
        cb && cb();
      }
      n++;
    }
    var timer = setInterval(move, 30);
  }
  
  
})

试着把JS部分封装一下：

window.addEventListener('load', function() {
  var log = console.log || window.console.log;
  var $ = document.querySelector.bind(document);

  var leftBtn = $('.leftBtn');
  var rigBtn = $('.rigBtn');
  var boxUl = $('.box').querySelector('ul');
  
  boxUl.style.width = boxUl.children[0].offsetWidth * boxUl.children.length + 'px';

  var obj = {
    leftBtn: rigBtn, // 左按钮DOM
    _ul: boxUl, //要移动的ulDOM
    rigBtn: leftBtn, //右按钮DOM
    inLiNum: 2, //ul外层盒子能容纳的li个数
  }
  leftOrRigAnimation(obj); //调用
  function leftOrRigAnimation(obj) {
    var flag1 = true;
    var flag2 = true;
    var inLiNum = obj.inLiNum;
    var overLiNum = obj._ul.children.length - inLiNum;

    obj.leftBtn.onclick = function() {
      log(1, obj._ul.offsetLeft);
      if(flag1) {
        flag1 = false;
        if(obj._ul.offsetLeft <= obj._ul.children[0].offsetWidth * - overLiNum) {
          obj._ul.style.left = obj._ul.children[0].offsetWidth * - overLiNum + 'px';
        } else {
          animate(obj._ul, obj._ul.offsetLeft, obj._ul.offsetLeft - obj._ul.children[0].offsetWidth, null, function(){ //回调函数，表示点击过后的当次位移完成之后执行
            if(obj._ul.offsetLeft < 0) { //0点左侧
              flag2 = true;
            }
            if(obj._ul.offsetLeft <= obj._ul.children[0].offsetWidth * - overLiNum) { //到达最左端
              flag1 = false;
            }
            if(obj._ul.offsetLeft > obj._ul.children[0].offsetWidth * - overLiNum) { //0点和最左端之间
              flag1 = true;
            }
          });
        }
      }
    }
    obj.rigBtn.onclick = function() {
      log(2, flag2);
      if(flag2) {
        flag2 = false;
        if(obj._ul.offsetLeft >= 0) {
          obj._ul.style.left = 0;
        } else {
          animate(obj._ul, obj._ul.offsetLeft, obj._ul.offsetLeft + obj._ul.children[0].offsetWidth, null, function(){ 
            if(obj._ul.offsetLeft >= 0) { //0点
              flag2 = false;
            }
            if(obj._ul.offsetLeft > obj._ul.children[0].offsetWidth * - overLiNum) { //最左端往右
              flag1 = true;
            }
            if(obj._ul.offsetLeft < 0) {//0点左侧
              flag2 = true;
            } 
          });
        }
      }
    }
  }

  function animate(obj, start, end, unit, cb) {
    var step = (end - start) / 10;
    var n = 1;
    var unit = unit || 'px';
    clearInterval(timer)
    function move() {
      obj.style.left = start + step * n + unit;
      if(obj.style.left === end + unit) {
        clearInterval(timer);
        cb && cb();
      }
      n++;
    }
    var timer = setInterval(move, 30);
  }
  
  
})
  • 把封装函数单独抽离出来：
function leftOrRigAnimation(obj) {
    var flag1 = true;
    var flag2 = true;
    var inLiNum = obj.inLiNum;
    var overLiNum = obj._ul.children.length - inLiNum;

    obj.leftBtn.onclick = function() {
      log(1, obj._ul.offsetLeft);
      if(flag1) {
        flag1 = false;
        if(obj._ul.offsetLeft <= obj._ul.children[0].offsetWidth * - overLiNum) {
          obj._ul.style.left = obj._ul.children[0].offsetWidth * - overLiNum + 'px';
        } else {
          animate(obj._ul, obj._ul.offsetLeft, obj._ul.offsetLeft - obj._ul.children[0].offsetWidth, null, function(){ //回调函数，表示点击过后的当次位移完成之后执行
            if(obj._ul.offsetLeft < 0) { //0点左侧
              flag2 = true;
            }
            if(obj._ul.offsetLeft <= obj._ul.children[0].offsetWidth * - overLiNum) { //到达最左端
              flag1 = false;
            }
            if(obj._ul.offsetLeft > obj._ul.children[0].offsetWidth * - overLiNum) { //0点和最左端之间
              flag1 = true;
            }
          });
        }
      }
    }
    obj.rigBtn.onclick = function() {
      log(2, flag2);
      if(flag2) {
        flag2 = false;
        if(obj._ul.offsetLeft >= 0) {
          obj._ul.style.left = 0;
        } else {
          animate(obj._ul, obj._ul.offsetLeft, obj._ul.offsetLeft + obj._ul.children[0].offsetWidth, null, function(){ 
            if(obj._ul.offsetLeft >= 0) { //0点
              flag2 = false;
            }
            if(obj._ul.offsetLeft > obj._ul.children[0].offsetWidth * - overLiNum) { //最左端往右
              flag1 = true;
            }
            if(obj._ul.offsetLeft < 0) {//0点左侧
              flag2 = true;
            } 
          });
        }
      }
    }
  }

  function animate(obj, start, end, unit, cb) {
    var step = (end - start) / 10;
    var n = 1;
    var unit = unit || 'px';
    clearInterval(timer)
    function move() {
      obj.style.left = start + step * n + unit;
      if(obj.style.left === end + unit) {
        clearInterval(timer);
        cb && cb();
      }
      n++;
    }
    var timer = setInterval(move, 30);
  }
  • 点击左侧按钮，内容左移，点击右侧按钮，内容右移的调用案例：
var obj = {
    leftBtn: rigBtn, // 左按钮DOM
    rigBtn: leftBtn, //右按钮DOM
    _ul: boxUl, //要移动的ulDOM
    inLiNum: 2, //ul外层盒子能容纳的li个数
  }
  leftOrRigAnimation(obj);
  • 点击左侧按钮，内容右移，点击右侧按钮，内容左移的调用案例：
// 其实就是把左右按钮换一下
 var obj = {
    leftBtn: rigBtn, // 右按钮DOM
    rigBtn: leftBtn, //左按钮DOM
    _ul: boxUl, //要移动的ulDOM
    inLiNum: 2, //ul外层盒子能容纳的li个数
  }
 leftOrRigAnimation(obj); //调用
  • 特别提醒，一般来说，项目中的ul也不是写死的，而是动态的，所以在调用前，要先给ul设置好宽度。
    boxUl.style.width = boxUl.children[0].offsetWidth * boxUl.children.length + 'px';
更新：把单次点击的移动距离提取出来
  • 以上的封装，其实都是针对li之间没有设置margin的情况。 但是有不少业务需求是在li之间互相有距离的，所以需要重新修改一下封装的代码。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <button class="leftBtn">左按钮</button>
  <button class="rigBtn">右按钮</button>
  <script src="index.js"></script>
</body>
</html>


/*index.css*/
/*demo.css*/
* {
  padding: 0;
  margin: 0;
}
ul li {
  list-style-type: none;
}
.box {
  position: relative;
  width: 220px;
  height: 100px;
  background-color: pink;
  margin-left: 200px;
  margin-top: 50px;
}
.box ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 580px;
  height: 100%;
}
.box ul li {
  float: left;
  width: 100px;
  height: 100%;
  margin-left: 20px;
  background-color: aquamarine;
}
.box ul li:nth-child(1) {
  margin-left: 0;
}
.leftBtn {
  margin-left: 240px;
}


/*demo.js*/
window.addEventListener('load', function() {
  var log = console.log || window.console.log;
  var $ = document.querySelector.bind(document);

  var leftBtn = $('.leftBtn');
  var rigBtn = $('.rigBtn');
  var boxUl = $('.box').querySelector('ul');
  // 其实就是把左右按钮换一下
  var obj = {
    leftBtn: rigBtn, // 右按钮DOM
    rigBtn: leftBtn, //左按钮DOM
    _ul: boxUl, //要移动的ulDOM
    inLiNum: 2, //ul外层盒子能容纳的li个数
    moveDistance: 120 // 点击一次移动的距离
  }
  leftOrRigAnimation(obj); //调用

  
  function leftOrRigAnimation(obj) {
    var flag1 = true;
    var flag2 = true;
    var inLiNum = obj.inLiNum;
    var overLiNum = obj._ul.children.length - inLiNum;
    obj.leftBtn.onclick = function() {
      log(1, obj._ul.offsetLeft);
      if(flag1) {
        flag1 = false;
        if(obj._ul.offsetLeft <= obj.moveDistance * - overLiNum) {
          obj._ul.style.left = obj.moveDistance * - overLiNum + 'px';
        } else {
          animate(obj._ul, obj._ul.offsetLeft, obj._ul.offsetLeft - obj.moveDistance, null, function(){ //回调函数，表示点击过后的当次位移完成之后执行
            if(obj._ul.offsetLeft < 0) { //0点左侧
              flag2 = true;
            }
            if(obj._ul.offsetLeft <= obj.moveDistance * - overLiNum) { //到达最左端
              flag1 = false;
            }
            if(obj._ul.offsetLeft > obj.moveDistance * - overLiNum) { //0点和最左端之间
              flag1 = true;
            }
          });
        }
      }
    }
    obj.rigBtn.onclick = function() {
      log(2, flag2);
      if(flag2) {
        flag2 = false;
        if(obj._ul.offsetLeft >= 0) {
          obj._ul.style.left = 0;
        } else {
          animate(obj._ul, obj._ul.offsetLeft, obj._ul.offsetLeft + obj.moveDistance, null, function(){ 
            if(obj._ul.offsetLeft >= 0) { //0点
              flag2 = false;
            }
            if(obj._ul.offsetLeft > obj.moveDistance * - overLiNum) { //最左端往右
              flag1 = true;
            }
            if(obj._ul.offsetLeft < 0) {//0点左侧
              flag2 = true;
            } 
          });
        }
      }
    }
  }

  function animate(obj, start, end, unit, cb) {
    var step = (end - start) / 10;
    var n = 1;
    var unit = unit || 'px';
    clearInterval(timer)
    function move() {
      obj.style.left = start + step * n + unit;
      if(obj.style.left === end + unit) {
        clearInterval(timer);
        cb && cb();
      }
      n++;
    }
    var timer = setInterval(move, 30);
  }
 
})
  • 这里把移动距离单独放在了obj对象里，也就是moveDistance属性。
  • 当li之间没有间隔时，moveDistance就是li的宽度
  • 当li之间有间隔时，moveDistance就是li的自身宽度 + 间隔距离。
新生代农民工官方认证码农小拽
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jquery实现左移，右移，全部左移，全部右移按钮
mj_hoe的博客
01-10 1413
用jquery实现左移，右移，全部左移，全部右移按钮 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> select,div{ display: inline-block; } .btn-
左右按钮图片切换
11-10
左右按钮图片切换
JS五张连篇，点击左右按钮可以移动！（图片左右滚动特效）
03-19
JS五张连篇，点击左右按钮可以移动！（图片左右滚动特效）主要用于想实现图片左右能滚动，点击左右按钮图片可以移动！！不错的！
html左右按钮切换代码,jquery实现点击左右按钮的切换单个元素
weixin_42099942的博客
06-05 481
html作一新求抖直微圈部分代码AAABBBCCCDDD<>css部分代遇新是直朋能到码*{padding: 0;margin: 0;}li{list-style: none;}.box{width: 800px;height: 300px;border: 1px solid red;margin: 80px auto;position: relative;}.box_wheel{wi...
HTML5滑动（swipe）事件
热门推荐
达拉斯母牛
10-22 5万+
移动H5开发中经常用到滑动效果（页面上移、下移、向左滑动、向右滑动等），浏览器并没有内置swipe事件，可以通过touch事件（touchstart、touchmove和touchend）模拟swipe效果。
js点击按钮使盒子每次都移动
最新发布
qq_53911056的博客
10-05 182
原因：因为加法中有字符串会做拼接，把a.style.marginLeft用parseInt转换成数字再计算，就是正确的向右移动的距离。关于js点击按钮使盒子移动一次，但想让它多次移动却没有效果的问题解决。
Vue3+ts：通过左右按钮控制元素往左往右移动一步，类似手动控制的走马灯
qq_43572283的博客
08-09 1756
1.1：有一个长度不限的数组中存放着想要展示的元素，展示篇幅只能放下四个元素。1.2：通过左右按钮实现按数组次序左右移动。1.3：数组长度小于4时，隐藏左右按钮。1.4：数组长度大于四，展示数组处于刚开头，不能再向前移动，处于最后时不能再向后移动。...
移动端的左右滑动DEMO，解决了左右滑动而不能上下滑动的事件冲突
Kingflag的博客
09-09 9115
解决前端左右滑动和上下滑动的时间冲突
实现按钮的左右的移动的效果
piaoliudehai的博客
05-24 3529
首先是定义一个imageButton的控件并让控件能够监听触摸时间decodingMode= (ImageButton) findViewById(R.id.decodingMode); decodingMode.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) {...
图片左右滚动（可自动，有左右按钮）
朱羽佳
07-25 1万+
图片左右滚动（可自动，有左右按钮） html代码如下： 图片滚动 *{margin:0;padding:0;} ul{list-style:none;} img{border:0;} .scroll{width:358px;height:63px;} .scroll_left{width:23px;height:63px;background:url(images
jquery左右按钮控制图片滚动和prettyphoto弹出层插.
10-31
jquery左右按钮控制图片滚动和prettyphoto弹出层插. jquery左右按钮控制图片滚动和prettyphoto弹出层插.
jQuery左右箭头按钮控制图片滚动切换特效
06-11
这是一款带有左右箭头按钮控制的jQuery图片滚动切换特效，代码简洁易用，图片滚动时有动感效果。
div左边点击链接右边显示内容特效
08-05
div左边点击链接右边显示内容特效，html代码静态代码
js CSS3实现卡牌旋转切换效果
12-02
我们经常会在游戏里看到一些几张卡牌左右切换的效果，中间的一张最突出醒目，向左或向右滑动可切换到另一张，今天我们就用CSS3来实现下这种效果。 我们先来看个demo，具体的样式各位可以自己调整： （PC下可点击按钮切换，移动端可左右滑动切换） 从效果上我们可以看到，这5个div可以左右的切换，每次切换时总会有一个在中间显眼的位置进行展示。在切换时，看起来是div进行了移动，进行了DOM的增删操作。但是如果审查下元素，就能看到，DOM元素没有变换位置，它依然在那个位置，我们只是切换了每个元素上的class，于是页面上的位置看起来是发生了变化。 其实原理就是这样的： 不进行DOM的增删，为每
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
08-28
主要介绍了微信小程序实现点击按钮移动view标签的位置功能,涉及微信小程序事件绑定与this.setData动态修改data数值进而改变view标签样式的相关操作技巧,需要的朋友可以参考下
CBtnST.rar_CBtnST_CBtnST如何使用_DEMO_按钮_按钮类
09-23
这是一个功能十分强大的按钮类，包括直接贴图，超级链接，鼠标移动进区域响应等等十多种效果，你可以参照这个DEMO很方便的使用按钮类。
长按按钮可以移动自动排序
04-04
源码PanMoveView，一个小demo，长按按钮可以移动自动排序，也可以拖拽移动自动排序。在此基础上可以做类似支付宝首页，网易新闻选项卡界面增加和删除的自动排序功能！代码里有错的地方望指教！！！ 测试环境：Xcode ...
Android应用源码之多个按钮左右相互挤压效果demo-IT计算机-毕业设计.zip
04-06
Android应用源码开发Demo，主要用于毕业设计学习。
移动轨迹 回放 demo
06-11
5. 最后，你可以添加一些控制按钮，比如暂停、播放、快进、快退等，来控制轨迹的回放速度和方向。 以上是一个简单的移动轨迹回放 demo 的基本步骤。当然，具体的实现方式还需要根据你的需求和技术栈来确定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值