JS实现容器模块左右拖动效果


Posted in Javascript onJanuary 14, 2020

本文实例为大家分享了JS实现容器模块左右拖动效果的具体代码,供大家参考,具体内容如下

JS实现容器模块左右拖动效果

实际效果是 鼠标点击上方颜色模块,左右拖动,根据拖动的距离来显示模块
一共有7个颜色块

代码如下

CSS

#box {
  /*margin: 0 auto;*/
  width: 1750px;
  border: 1px solid black;
  display: block;
  position: relative;
  left: 0;
  }

  #box>div {
  width: 250px;
  height: 50px;
  display: inline-block;
  text-align: center;
  float: left;
  }

  h1 {
  padding: 0;
  margin: 0;
  }

Html

<div style="width: 1000px;overflow: hidden;margin: auto;position: relative;">
  <div id="box">
  <div style="background: lemonchiffon;">
   <h1>one</h1></div>
  <div style="background: lightblue;">
   <h1>tow</h1></div>
  <div style="background: gold;">
   <h1>three</h1></div>
  <div style="background: blue;">
   <h1>four</h1></div>
  <div style="background: orange;">
   <h1>five</h1></div>
  <div style="background: aqua;">
   <h1>six</h1></div>
  <div style="background: brown;">
   <h1>seveen</h1></div>
  </div>
  <h1>拖动上面的颜色模块</h1>
 <p>实际原理还是轮播图</p>
</div>
<div style="width: 1000px;overflow: hidden;margin: auto;position: relative;">

注意:最大容器的DIV中宽度设置为1000px 表示展示的内容为1000,超出的被隐藏,根据自己想展示的模块来设计id为‘box'的DIV则为超大宽度的容器,里面模块以浮动形式布局,原理跟轮播图一样'**。

JS

<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 let box = document.getElementById('box')
 $box = $('#box')
 let mouseState = false; //鼠标默认状态
 let startX = 0;
 let startY = 0;
 let moveDirection = 0 //鼠标拖动距离
 $boxLeft = parseInt($box.css('left'))//表示内容块被偏移的值
 //鼠标按下事件
 box.addEventListener('mousedown', function(e) {
  //更改鼠标状态
  //参数e为鼠标
  mouseState = true
  //获取鼠标坐标
  startX = e.clientX
  startY = e.clientY
  //鼠标拖动初始化
  moveDirection = 0
  $boxLeft = parseInt($box.css('left'))
 })
 //鼠标移动状态
 box.addEventListener('mousemove', function(e) {
  //判断鼠标是不是被按下中移动
  if(mouseState) {
  //判断是向左还是向右拖动鼠标
  moveDirection = e.clientX - startX
  //向右移动
  box.style.left = $boxLeft + moveDirection + 'px'
  }
 })
 //鼠标弹起事件
 box.addEventListener('mouseup', function(e) {
  mouseState = false
  if(moveDirection > 0) {
  //$boxLeft<0表示已经看到最左的模块,不能在向右拖拉
  $boxLeft = parseInt($box.css('left'))
  //取余,比如拖动了52px,实际内容块就250px,偏移余下的px就能看的完整的内容块
  $num = $boxLeft % 250
  if($boxLeft < 0) {
   $box.animate({
   left: $boxLeft - $num + 'px'
   }, 500, function() {
   console.log(parseInt($box.css('left')))
   })
  } else {
  //向右偏移,如果$boxLeft大于等于0的话 那就是还是第一个颜色模块,不允许被偏移
   $box.animate({
   left: 0 + 'px'
   }, 500, function() {})
  }
  } else if(moveDirection < 0) {
  //$boxLeft>-750表示已经看到最右边的模块,不能在向左拖拉
  $boxLeft = parseInt($box.css('left'))
  $num = 250 + $boxLeft % 250
  if($boxLeft > -750) {
   $box.animate({
   left: $boxLeft - $num + 'px'
   }, 500, function() {
   console.log(parseInt($box.css('left')))
   })
  }else{
  //向左偏移,如果$boxLeft小于等于-750px的话 那就是最后一个颜色模块,不允许被偏移
   $box.animate({
   left: -750 + 'px'
   }, 500, function() {})
  }
  }
 })
</script>

OK了。应该能看的懂了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
input按钮的事件处理大全
Dec 10 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 #Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 #Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 #Javascript
js实现列表向上无限滚动
Jan 13 #Javascript
vue 组件销毁并重置的实现
Jan 13 #Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 #Javascript
微信小程序聊天功能的示例代码
Jan 13 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
p5.js实现动态图形临摹
2019/10/23 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
python之随机数函数的实现示例
2020/12/30 Python
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
迟到检讨书大全
2014/01/25 职场文书
先进班组材料范文
2014/12/25 职场文书
科技活动总结范文
2015/05/11 职场文书
党员反邪教心得体会
2016/01/15 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
mysql脏页是什么
2021/07/26 MySQL