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 相关文章推荐
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
使用Vue实现简单计算器
Feb 25 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
详解Python locals()的陷阱
2019/03/26 Python
python实现桌面气泡提示功能
2019/07/29 Python
python flask搭建web应用教程
2019/11/19 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Python实现区域填充的示例代码
2021/02/03 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
秋季运动会加油稿200字
2014/01/11 职场文书
小学生成长感言
2014/01/30 职场文书
初一学生期末评语
2014/04/24 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
烟台的海导游词
2015/02/02 职场文书
老公保证书怎么写
2015/02/26 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python