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 相关文章推荐
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
webpack3之loader全解析
Oct 26 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
input框中的name和id的区别
2016/11/16 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
Html中 IFrame的用法及注意点
2016/12/22 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
python视频按帧截取图片工具
2019/07/23 Python
python3.8下载及安装步骤详解
2020/01/15 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
公司节能减排倡议书
2014/05/14 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
交心谈心活动总结
2015/05/11 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android