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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
微信小程序后端实现授权登录
Feb 24 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Python reduce函数作用及实例解析
2020/05/08 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
大学生自我鉴定范文模板
2014/01/21 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
史上最牛的辞职信
2015/02/28 职场文书
推荐信范文大全
2015/03/27 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis