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 相关文章推荐
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
vue实现简单全选和反选功能
Sep 15 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中截取字符串支持utf-8
2007/01/18 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
node.js 中间件express-session使用详解
2017/05/20 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
使用python实现扫描端口示例
2014/03/29 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Django nginx配置实现过程详解
2020/09/10 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
《只有一个地球》教学反思
2014/02/14 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
学校计划生育责任书
2015/05/09 职场文书
护士旷工检讨书
2015/08/15 职场文书