实现如下图的操作,拖动红色块改变滚动条及块上的值 。该值代表 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>