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实现可改变列宽的table实例
Jul 02 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
js上传图片预览的实现方法
May 09 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 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 采集程序 常用函数
2008/12/18 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
深入探讨前端框架react
2015/12/09 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
vuex 中插件的编写案例解析
2019/06/10 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python版DDOS攻击脚本
2019/06/12 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python中logging日志库实例详解
2020/02/19 Python
基于keras中的回调函数用法说明
2020/06/17 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
英国在线药房:Express Chemist
2019/03/28 全球购物
对照四风自我剖析材料
2014/10/07 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android