您的位置:首页 > 其它

类似阿里云弹性计算的滑块

2015-07-15 15:17 507 查看

一个阿里云弹性计算的滑块,当然,与阿里云的还是有大差距哈。

查看演示

 

 

$(".track").mousedown(function() {
var target=$(this).parent();
isMoving=true;
$("html,body").mousemove(function(event) {
if(isMoving==false)return;
var changeX = event.clientX - ScrollerTrack.CurrentX;
currentValue = changeX - ScrollerTrack.CurrentX;
if(changeX<=0){
$(target).find(".track").css("margin-left", "0px");
$(target).find(".valueC").css("width", "0px");
$(target).find(".show").css("margin-left", "-15px");
$(target).find(".show").html(0);
ScrollerTrack.CurrentValue=0;
}
else if(changeX>=ScrollerTrack.BodyWidth-16){
$(target).find(".track").css("margin-left", ScrollerTrack.BodyWidth-16+"px");
$(target).find(".valueC").css("width",ScrollerTrack.BodyWidth-16+"px");
$(target).find(".show").css("margin-left", ScrollerTrack.BodyWidth-31+"px");
$(target).find(".show").html(ScrollerTrack.MaxValue);
ScrollerTrack.CurrentValue=ScrollerTrack.MaxValue;
}
else{
$(target).find(".track").css("margin-left", changeX+"px");
$(target).find(".valueC").css("width", changeX+"px");
$(target).find(".show").css("margin-left", changeX-15+"px");
var v=ScrollerTrack.MaxValue*((changeX+16)/ScrollerTrack.BodyWidth);
$(target).find(".show").html(parseInt(v));
ScrollerTrack.CurrentValue=parseInt(v);
}
});
});

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: