价格区间选择案例 吸附功能 待改…
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.scrollDiv{
width: 500px;
overflow: hidden;
margin: 50px auto;
}
.scroll{
width: 400px;
height: 60px;
margin:20px auto;
/*overflow: hidden;*/
}
.scrollLine{
width: 400px;
height: 4px;
margin-top: 28px;
background-color: #ddd;
position: relative;
}
.scrollCircle,.scrollbar{
width: 100%;
height: 26px;
position: absolute;
left: 0;
top: -10px;
}
.scrollCircle span{
display: block;
float: left;
width: 26px;
height: 26px;
background-color: #ddd;
border-radius: 100%;
margin-left: -13px;
}
.scrollCircle .item2{
position: absolute;
left: 100px;
}
.scrollCircle .item3{
position: absolute;
left: 200px;
}
.scrollCircle .item4{
position: absolute;
left: 300px;
}
.scrollCircle .item5{
position: absolute;
left: 400px;
}
.scrollCircle span:first-child{
/*margin-left: 0;*/
}
.scrollCircle span:last-child{
/*margin-right: 0;*/
}
.scrollCircle span a,.scrollbar span{
display: block;
width: 20px;
height: 20px;
margin-top: 3px;
margin-left: 3px;
border-radius: 100%;
}
.scrollbar .low{
position: absolute;
left: -13px;
}
.scrollCircle span a{
background-color: #fff;
}
.scrollbar span{
display: inline-block;
background-color: red;
}
.scrollbar .high{
position: absolute;
left: 187px;
}
</style>
</head>
<body>
<div class="scrollDiv">
<div class="scroll">
<div class="scrollLine">
<div class="scrollCircle">
<span class="item1">
<a></a>
</span>
<span class="item2">
<a></a>
</span>
<span class="item3">
<a></a>
</span>
<span class="item4">
<a></a>
</span>
<span class="item5">
<a></a>
</span>
</div>
<div class="scrollbar">
<span class="low"></span>
<span class="high"></span>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var low = $(".low"),
high = $(".high");
var move = false,
move1 = false,
_x,_y,
scrLeft = parseInt($(".scrollbar").offset().left);
var x,x1 = 174;
var w = $(".low").width(),//滚动条 宽
itemW = $(".item1").width(),//背景 宽
scW = $(".scrollCircle").width(),//总宽
itemLen = $(".scrollCircle span").length,//锚点个数
avgNum = (scW / (itemLen - 1))/2;//刻度值 用于控制刻度
var maxPos = scW - itemW / 2,
minPos = -(itemW / 2),
avg = scW / itemLen;
low.mousedown(function(e){
move = true;
});
low.mousemove(function(e){
});
low.mouseup(function(){
move = false;
});
high.mousedown(function(e){
move1 = true;
});
high.mouseup(function(e){
move1 = false;
});
//window 移动
$(document).mousemove(function(e){
if(move){
x = e.pageX - scrLeft;
if(x > x1){
x = x1;
}
$(".low").css({"left": x});
}
if(move1){
x1 = e.pageX - scrLeft;
if (x1 < x) {
x1 = x;
}
$(".high").css({"left": x1});
}
});
$(document).mouseup(function(){
//最小点
if(move){
var xs = avgTo(x);
$(".low").css({"left": xs});
move = false;
}
//最大点
if (move1) {
var xs1 = avgTo(x1);
$(".high").css({"left": xs1});
move1 = false;
}
});
function avgTo(xs){
if(xs <= avgNum || xs <= 0) xs = minPos;
if(xs > avgNum && xs <= avgNum*3) xs = avgNum*2 -13;
if(xs > avgNum*3 && xs <= avgNum*5) xs = avgNum*4 -13;
if(xs > avgNum*5 && xs <= avgNum*7) xs = avgNum*6 -13;
if(xs > avgNum*7) xs = maxPos;
return xs;
}
});
</script>
</html>
转载请注明原文地址: https://ju.6miu.com/read-1298643.html
