价格区间选择案例 吸附功能
Posted 川衡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了价格区间选择案例 吸附功能相关的知识，希望对你有一定的参考价值。
价格区间选择案例 吸附功能 待改…
<!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>
以上是关于价格区间选择案例 吸附功能的主要内容，如果未能解决你的问题，请参考以下文章
音频处理Melodyne 选择工具使用 ( 主工具简介 | 修改音高 | 自动吸附 | 音符长度修改 | 长度自动吸附 | 设置音符分离线 | 设置片段分离线 )