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了。应该能看的懂了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 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; d

  • js实现div在页面拖动效果

    本文实例讲述了js实现div在页面拖动效果.分享给大家供大家参考,具体如下: <style type="text/css"> body { margin: 0px; } #div1 { display: none; position: absolute; z-index: 1000; height: 100%; width: 100%; background: #000000; filter:Alpha(opacity=30); } #div2 { display: non

  • js实现iGoogleDivDrag模块拖动层拖动特效的方法

    本文实例讲述了js实现iGoogleDivDrag模块拖动层拖动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

  • jQuery实现的跨容器无缝拖动效果代码

    本文实例讲述了jQuery实现的跨容器无缝拖动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h

  • JS实现超简单的鼠标拖动效果

    本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo

  • JS响应鼠标点击实现两个滑块区间拖动效果

    本文实例讲述了JS实现的两个滑块区间拖动效果代码.分享给大家供大家参考,具体如下: 网页上的滑块功能如何实现呢?其实用JS就可以,这就是一个网页滑块,两个滑块可以任意拖动,形成一个滑块区间,而且代码兼容IE和其它主流的浏览器,两个滑块确定一个区间范围. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/ 具体代码如下: <!DOCTYPE html> <html> <head>

  • JS 拖动效果实现代码 比较简单

    JS拖动效果 Drag Me [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]

    仿3721首页模块拖曳移动效果[拖曳层移动层]呵,做了一些细致的处理 html, body { width:100%; height:100%; padding:0px; margin:0px; } body { text-align:center; font-size:14px; } .cell_left, .cell_right { width:202px; } .cell_center { width:404px; } .left { float:left; } .row { clear:

  • js 页面模块自由拖动实例

    js页面模块自由拖动 .removableObj { height:25;position:relative; } var beginMoving=false; var sourceObj=null; var objectObj=null; function MouseDownToMove(obj){ obj.style.zIndex=1; obj.mouseDownY=event.clientY; obj.mouseDownX=event.clientX; beginMoving=true;

  • js实现适配移动端的拖动效果

    本文实例为大家分享了js实现适配移动端的拖动效果,供大家参考,具体内容如下 1.html <div id="div1"> <div id="div2"></div> </div> 2.js var flag = false; var cur = { x: 0, y: 0 } var nx, ny, dx, dy, x, y; function down() { flag = true; var touch; if(ev

随机推荐