jQuery刻度尺滚动滑块插件

为什么80%的码农都做不了架构师？>>>

jQuery刻度尺滚动滑块插件

需要用到一个刻度尺插件，网上找来找去都是那几种，所以用jQuery自己写了一个。

<!doctype html>

<html>

<head>

<style>

.mui-content { background: #e8e8e8;}

#main {

position: relative;

margin-left: 50%;

margin-top: 100px;

width: 2560px;

font-family: 微软雅黑;

-webkit-user-select: none;

background: #e8e8e8;

height: 100px;

}

#contain {

position: absolute;

top: 0px;

right: 0px;

width: 2560px;

height: 50px;

background-color: #fff;

/*配置marginRight=560px-1px,血糖值为7.0*/

margin-right: 559px;

}

#track {

position: absolute;

top: 0px;

left: 0px;

width: 2px;

height: 56px;

margin: -3px 0 0 0px;

background-color: red/*#2dacd1*/;

cursor: pointer;

}

#value>span {

position: absolute;

text-align: right;

height: 40px;

line-height: 80px;

color: #808080;

border-right: 1px solid #ddd;

}

#value>span span {

position: absolute;

height: 30px;

border-right: 1px solid #ddd;

}

#show {

width: 45px;

height: 30px;

background-color: #333;

color: #fff;

text-align: center;

line-height: 30px;

position: absolute;

left: 0px;

top: 0px;

opacity: 0.9;

margin-top: -38px;

margin-left: -20px;

}

.f14 { font-size: 14px;}

.c5, a.c5 { color: #666;}

</style>

</head>

<body>

</header>

</div>

</div>

</div>

$(function(){ScrollerTrack.Init();});

var ScrollerTrack={

BodyWidth: 2560,//总宽度

MaxValue: 32.0,//厘米最大值

CurrentX: 0,//移动距离

CurrentValue: 0,//移动的刻度数

Count: 0,//厘米刻度数量

SCALE: 10,//一厘米有多少毫米刻度

Init:function(){

var mWidth=ScrollerTrack.BodyWidth;//刻度计总的宽度

$("#contain").css("width",mWidth+"px");//主容器宽度

//厘米刻度数量=最大值除以1

var count=ScrollerTrack.MaxValue/1;

//赋值厘米刻度数量

ScrollerTrack.Count=count;

//一个厘米的宽度=总宽度除以厘米数量

var itemWidth=mWidth/count;

//一厘米有多少个毫米

var scale = ScrollerTrack.SCALE;

//毫米宽度=一厘米宽度除以10

var dialsWidth = itemWidth/10;

//循环渲染页面，显示刻度

for(var i=0;i<count;i++){

var span=$("<span>"+(i+1)+".0"+"</span>");

$(span).css("width",itemWidth+"px").css("margin-left",i*itemWidth+"px").css("color","#55bfc5");

$("#value").append(span);

for(var r=0;r<scale;r++){

var dials=$("<span></span>");

$(dials).css("width",dialsWidth+"px").css("margin-left",r*dialsWidth+"px").css("left","0px");

$(span).append(dials);

}

ScrollerTrack.Value();

//取值

Value: function(){

var currentValue;

var isMoving=false;

$("#contain").mousedown(function(e) {

//点击屏幕时刻度尺的右margin值

var val = parseInt($("#contain").css('marginRight'));

var target=$(this).parent();

//拖动开始时的x坐标

var downX = e.clientX;

isMoving=true;

$("html,body").mousemove(function(event) {

ScrollerTrack.CurrentX = val;

if(isMoving==false)return;

//移动的x轴距离=拖动开始的X坐标-拖动结束的X坐标，正数是左滑动，负数是右滑动

var changeX = downX - event.clientX;

//左滑动

if(changeX >= 0){

ScrollerTrack.CurrentX += changeX;

//右滑动取正数

}else{

//取正数

changeX = -changeX;

ScrollerTrack.CurrentX -= changeX;

}

if(ScrollerTrack.CurrentX<=0){

$(target).find("#contain").css("margin-right", "0px");

$(target).find("#show").html(0);

$("#numbox").html(0);

ScrollerTrack.CurrentValue=0;

ScrollerTrack.CurrentX = 0;

}

else if(ScrollerTrack.CurrentX>= ScrollerTrack.BodyWidth-1){

$(target).find("#contain").css("margin-right", ScrollerTrack.BodyWidth-1 + "px");

$(target).find("#show").html(ScrollerTrack.MaxValue);

$('#numbox').html(ScrollerTrack.MaxValue);

ScrollerTrack.CurrentValue=ScrollerTrack.MaxValue;

ScrollerTrack.CurrentX = ScrollerTrack.MaxValue;

}

else{

$(target).find("#contain").css("margin-right", ScrollerTrack.CurrentX +"px");

var v=ScrollerTrack.MaxValue*(ScrollerTrack.CurrentX/ScrollerTrack.BodyWidth);

$(target).find("#show").html(parseFloat(v).toFixed(1));

$('#numbox').html(parseFloat(v).toFixed(1));

ScrollerTrack.CurrentValue=parseFloat(v).toFixed(1);

}

});

$("html,body").mouseup(function() {

isMoving=false;

});

}

</script>

</body>

</html>

转载于:https://my.oschina.net/af666/blog/813617

jQuery刻度尺滚动滑块插件相关推荐

js原生刻度尺滚动滑块插件
为什么80%的码农都做不了架构师?>>> js原生刻度尺滚动滑块插件用的MUI框架,原生兼容性很好,性能也更好,所以费了很大的力气改成原生的分享给大家. 有时间了改成手机版. ...
html 文件域变滑块,小巧的jQuery区域范围滑块插件noUiSlider
小巧的jQuery区域范围滑块插件noUiSlider 分类:代码日期:2020-02-10 点击(21,970) 下载(0) 来源:未知收藏区域范围滑块在 Windows 系统中很常见,如更改 ...
【特别推荐】精心挑选的6款优秀的 jQuery 视差滚动效果插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Pa ...
15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...
前端开发不容错过的jQuery图片滑块插件(转)
作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQu ...
jquery 图像滑块_10个很棒的jQuery图像滑块插件
jquery 图像滑块 The introduction of jQuery has contributed a lot in making the overall process of websit ...
[置顶] Web开发百宝箱——提升网站档次的时尚 jQuery 图片滚动插件
这篇文章向大家推荐8款时尚的 jQuery 图片滚动插件.jQuery 是最流行和使用最广泛的 JavaScript 框架,它可以让帮助你在你的项目中加入一些很炫的图片滚动效果.希望这些插件对你有所帮 ...
Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
php抽奖的数字滚动器,jQuery数字滚动插件
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: jQuery数字滚动效果,可调整不同位数使用方法导入index.js html js调用$("#da ...

jQuery刻度尺滚动滑块插件

jQuery刻度尺滚动滑块插件相关推荐

最新文章

热门文章