论坛首页 Web前端技术论坛

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

浏览 1407 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2015-07-15  

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

查看演示

 

 

		 $(".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);
				 }
			 });
		 });

 

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics