拖動滾動條,顯示階段資料的值
阿新 • • 發佈:2018-12-17
實現如下圖的操作,拖動紅色塊改變滾動條及塊上的值 。該值代表 x 人團購享受 xx% 的折扣
下為原始碼,只是沒有圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .justify_center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .align_center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex_column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .prom_item { margin-bottom: 40px; padding-bottom: 10px; } .scrollbar { width: 400px; height: 26px; background: url(image/prom1.png) no-repeat; background-size: 100% 100%; display: inline-block; position: relative; padding: 2px 0; box-sizing: border-box; margin-top: 43px; } .fix_bar { font-size: 0px; } .fix_bar>img { z-index: 3; position: relative; } .fix_bar>img:first-child { right: -2px; } .fix_bar>img:last-child { left: -2px; } .autoBar { width: 10%; height: 22px; background: url(image/prom2.png); background-size: auto 100%; z-index: 2; } .percentage { font-size: 12px; color: #2c5a90; margin-left: 8px; } .prom_price { width: 88px; height: 74px; background: url(image/prom6.png) no-repeat; background-size: 100% 100%; color: #fff; padding-bottom: 12px; box-sizing: border-box; position: absolute; top: -94px; left: 0; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; user-select: none; } .prom_price_num { font-size: 16px; } .prom_price_percent { font-size: 14px; } .prom_price_num, .prom_price_percent { width: 100%; display: block; text-align: center; } .prom_goods{ width:500px; margin:100px auto; } </style> </head> <body> <!-- 產品列表 --> <div class="prom_goods"> <div class="prom_item flex align_center"> <!-- 滾動條 --> <div class="scrollbar"> <p class="prom_price flex flex_column align_center justify_center"> <span class="prom_price_num" data-num="5">5 sets </span> <span class="prom_price_percent">10% OFF</span> </p> <div class="fix_bar flex align_center"> <img src="image/prom3.png" alt=""> <p class="autoBar"> </p> <img src="image/prom4.png" alt=""> <!-- <span class="percentage">10%</span> --> </div> </div> </div> <div class="prom_item flex align_center"> <!-- 滾動條 --> <div class="scrollbar"> <p class="prom_price flex flex_column align_center justify_center"> <span class="prom_price_num" data-num="5">5 sets </span> <span class="prom_price_percent">10% OFF</span> </p> <div class="fix_bar flex align_center"> <img src="image/prom3.png" alt=""> <p class="autoBar"> </p> <img src="image/prom4.png" alt=""> <!-- <span class="percentage">10%</span> --> </div> </div> </div> <div class="prom_item flex align_center"> <!-- 滾動條 --> <div class="scrollbar"> <p class="prom_price flex flex_column align_center justify_center"> <span class="prom_price_num" data-num="5">5 sets </span> <span class="prom_price_percent">10% OFF</span> </p> <div class="fix_bar flex align_center"> <img src="image/prom3.png" alt=""> <p class="autoBar"> </p> <img src="image/prom4.png" alt=""> <!-- <span class="percentage">10%</span> --> </div> </div> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> /*************************團購********************************/ var list = new Array(); // list裡面,第一個為'10 sets',第二個為'10 %OFF',第三個 33 為陣列第一位10對應最後一位(最大值)30的百分比值. list.push([["10", "10", 33], ["20", "20", 66], ["30", "30", 100]]); list.push([["10", "10", 50], ["15", "20", 75], ["20", "25", 100]]); list.push([["10", "95", 28], ["15", "90", 42], ["20", "85", 57], ["25", "80", 71], ["30", "75", 85], ["35", "70", 100]]); var distance, left, parcent, $prom_price, curren_item, curren_arr; $(".prom_price").on('mousedown', function (event) { event = event ? event : window.event; if (event.button == 0) {//判斷是否點選滑鼠左鍵 $prom_price = $(this); // 繫結拖動、鬆開事件 $(document).bind("mousemove", move); $(document).bind("mouseup", stop); } curren_item = $(this).closest('.prom_item'); curren_item = $(".prom_item").index(curren_item); //當前陣列 curren_arr = list[curren_item]; return false;//阻止預設事件或冒泡 }) function move(event) { event = event ? event : window.event; // 計算滑鼠距離$(".scrollbar")的距離 distance = event.pageX - ($(".scrollbar").offset().left + ($(".scrollbar").width() / 2)); // 跳固定值 if (distance >= -200 && distance <= 200) { for (var i = 0; i < curren_arr.length; i++) { //eg:當前距離為-120時,距離左邊 156-120 = 36畫素。156為200 - 44(元素超出滾動條的畫素距離) left = 156 + distance; $prom_price.css({ left: left }); // 計算出當前畫素對應400的百分比 parcent = Math.floor((left + 44) / 400 * 100) < 0 ? 0 : Math.floor((left + 44) / 400 * 100); // 改變滾動條的長度 $prom_price.closest('.scrollbar').find('.autoBar').css({ width: parcent + '%' }); // 當前的百分比達到引數的百分比時,改變為引數的值 prenum = (i == 0) ? curren_arr[0][1] : curren_arr[i - 1][2]; if (parcent == curren_arr[i][2] || parcent > prenum) { $prom_price.find(".prom_price_num").html(curren_arr[i][0] + " sets"); $prom_price.find(".prom_price_percent").html(curren_arr[i][1] + "% OFF"); // 改變滾動條右邊的百分比值 // $prom_price.closest('.scrollbar').find('.percentage').html(parcent+'%'); } } } return false;//阻止預設事件或冒泡 } function stop() { //解繫結,這一步很必要,不然滑鼠鬆開了還是會滑動 $(document).unbind("mousemove", move); $(document).unbind("mouseup", stop); } </script> </html>