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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
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
打造计数器DIY三步曲(中)
2006/10/09 PHP
如何在PHP中进行身份认证
2006/10/09 PHP
php上传图片类及用法示例
2016/05/11 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
javascript中对对层的控制
2006/12/29 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
ES6字符串的扩展实例
2020/12/21 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python 绘图和可视化详细介绍
2017/02/11 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python创建学生成绩管理系统
2019/11/22 Python
超级实用的8个Python列表技巧
2020/08/24 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
护理专业学生职业生涯规划范文
2014/03/11 职场文书
小学三年级学生评语
2014/04/22 职场文书
2014年团委工作总结
2014/11/13 职场文书
运动会200米广播稿
2015/08/19 职场文书
环保建议书作文300字
2015/09/14 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python