JS實現容器模組左右拖動效果
阿新 • • 發佈:2020-01-15
本文例項為大家分享了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' },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' },function() { console.log(parseInt($box.css('left'))) }) }else{ //向左偏移,如果$boxLeft小於等於-750px的話 那就是最後一個顏色模組,不允許被偏移 $box.animate({ left: -750 + 'px' },function() {}) } } }) </script>
OK了。應該能看的懂了
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。