jq 进度条插件
/**
*进度条
*/
var ProgressScrollBar = function (model) {
this.defaults = {
isCanMove: true,//是否启用拖动
container: "",//最外容器ID
Mainselector: "", //主要div的ID jq选择器字符串#id
Textselector: false, //文字显示查找选择器inputobj
value: 0, //初始值
maxValue: 200, //最大值
currentX: 0,//当前位置px单位
scroll_Track: false, //主干线对象
scroll_Thumb: false //图标对象
};
var opt = $.extend(this.defaults, model);
var mainDivWidth = 0;
var mSelector;
var $Textselector;
var offetWidth;
//初始化
this.Initialize = function () {
if (opt.value > opt.maxValue) {
alert("给定当前值大于了最大值");
return;
}
mSelector = $(opt.Mainselector);
$Textselector = opt.Textselector;
if (!opt.scroll_Track) {
mSelector.append('<div class="scroll_Track"></div>');
opt.scroll_Track = mSelector.find(".scroll_Track");
}
if (!opt.scroll_Thumb) {
mSelector.append('<div class="scroll_Thumb"></div>');
opt.scroll_Thumb = mSelector.find(".scroll_Thumb");
}
mainDivWidth = mSelector.width(); //当前idv宽度
offetWidth = opt.scroll_Thumb.width();
this.GetValue();
opt.scroll_Track.css("width", opt.currentX + 2 + "px");
opt.scroll_Thumb.css("margin-left", opt.currentX + "px");
if (opt.isCanMove) {
this.Value();
}
if ($Textselector && opt.value >= 0)
$Textselector.val(opt.value);
},
this.Value = function () {
var valite = false;
var currentValue;
opt.scroll_Thumb.mousedown(function () {
valite = true;
mSelector.parent().mousemove(function (event) {
console.log(event.offsetX + ", cleint:" + event.clientX + ", parent: " + mSelector.parent().offset().left);
if (valite == false) return;
var changeX = event.clientX - opt.currentX;
currentValue = changeX - opt.currentX - mSelector.offset().left - (offetWidth / 2);
opt.scroll_Thumb.css("margin-left", currentValue + "px");
opt.scroll_Track.css("width", currentValue + 2 + "px");
if ((currentValue + offetWidth) >= mainDivWidth) {
opt.scroll_Thumb.css("margin-left", mainDivWidth - offetWidth + "px");
opt.scroll_Track.css("width", mainDivWidth + 2 + "px");
opt.value = opt.maxValue;
} else if (currentValue <= 0) {
opt.scroll_Thumb.css("margin-left", "0px");
opt.scroll_Track.css("width", "0px");
} else {
opt.value = parseInt(opt.maxValue * (currentValue / mainDivWidth));
}
if ($Textselector && opt.value >= 0)
$Textselector.val(opt.value);
});
});
opt.scroll_Thumb.mouseup(function () {
opt.value = parseInt(opt.maxValue * (currentValue / mainDivWidth));
valite = false;
if (opt.value >= opt.maxValue) opt.value = opt.maxValue;
if (opt.value <= 0) opt.value = 0;
if ($Textselector && opt.value >= 0)
$Textselector.val(opt.value);
});
},
this.GetValue = function () {
opt.currentX = mainDivWidth * (opt.value / opt.maxValue);
},
//按值自动滚动
this.SetValue = function (aValue) {
opt.value = aValue;
if (opt.value >= opt.maxValue) opt.value = opt.maxValue;
if (opt.value <= 0) opt.value = 0;
var mWidth = opt.value / opt.maxValue * mainDivWidth;
opt.scroll_Thumb.animate({ "margin-left": mWidth + "px" });
opt.scroll_Track.animate({ "width": mWidth + 2 + "px" });
if ((mWidth + offetWidth) >= mainDivWidth) {
opt.scroll_Thumb.animate({ "margin-left": mainDivWidth - offetWidth + "px" });
opt.scroll_Track.animate({ "width": mainDivWidth + 2 + "px" });
} else if (mWidth <= 0) {
opt.scroll_Thumb.animate({ "margin-left": "0px" });
opt.scroll_Track.animate({ "width": "0px" });
} else {
opt.value = Math.round(opt.maxValue * (mWidth / mainDivWidth));
}
if ($Textselector && opt.value >= 0)
$Textselector.val(opt.value);
},
//按像素自动滚动
this.SetPixelValue = function (pixelValue) {
opt.scroll_Thumb.animate({ "margin-left": pixelValue + "px" });
opt.scroll_Track.animate({ "width": pixelValue + "px" });
if ((pixelValue + offetWidth) >= mainDivWidth) {
opt.scroll_Thumb.animate({ "margin-left": mainDivWidth - offetWidth + "px" });
opt.scroll_Track.animate({ "width": mainDivWidth + "px" });
} else if (pixelValue <= 0) {
opt.scroll_Thumb.animate({ "margin-left": "0px" });
opt.scroll_Track.animate({ "width": "0px" });
} else {
opt.value = Math.round(opt.maxValue * (pixelValue / mainDivWidth));
}
}
}
jq 进度条插件的更多相关文章
- YprogressBar,html5进度条样式,js进度条插件
简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- 一个Notification 进度条插件(android,NJS实现,直接就可使用)
参考文章:http://ask.dcloud.net.cn/article/503 源码地址下载 如题,分享一个Notification 进度条插件(android,用js调用原生api实现,直接就可 ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- JQuery中简约的进度条插件推荐
JQuery Progress Bar是基于JQuery开发的进度条插件,秉承了JQuery的简约哲学.不仅容易使用,而且可以轻松定制外观.对于使用了JQuery框架的项目来说,需要使用进度条控件时这 ...
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
- 简单的jquery进度条插件LineProgressbar.js,myProgress.js
参考 http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...
- HTML5圆形百分比进度条插件circleChart
在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
随机推荐
- SystemInfo获取设备系统参数
using UnityEngine; using System.Collections; using System.Collections.Generic; publicclassGameContro ...
- WPF Application
Application类作为启动的入口,在VS中,通常自动代码为我们继承了Application类,这样做的有点,我还没有理解到,但是我们先学到这个知识点. 为了能够更好的控制整个启动过程,包括得到A ...
- Firewalld防火墙
Firewalld服务是红帽RHEL7系统中默认的防火墙管理工具,特点是拥有运行时配置与永久配置选项且能够支持动态更新以及"zone"的区域功能概念,使用图形化工具firewall ...
- 第一百二十四节,JavaScriptCookie与存储
JavaScriptCookie与存储 学习要点: 1.cookie 2.cookie局限性 3.其他存储 随着Web越来越复杂,开发者急切的需要能够本地化存储的脚本功能.这个时候,第一个出现的方案: ...
- 2016NOMS全国运营峰会——史上更强嘉宾阵容提前揭晓!
参加2016NOMS全国运营峰会的演讲嘉宾来自运营领域的各个方面,包括用户运营.内容运营.活动运营.数据运营等.自大会消息一出立刻受到业界的广泛关注,并吸引了众多业内人士踊跃报名.日前,这一运营界峰会 ...
- redisTemplate keys方法 为空
我遇到的原因是spring.xml配置有问题,应该为: <bean id="redisTemplate" class="org.springframework.da ...
- 查看JS object 结构
function lookProperty(obj){ var ob=eval(obj); var property=""; for(var p in ob){ property+ ...
- python 之调用Linux shell命令及相关高级应用
最近根据老大要求,将数据进行同步备份,结合第三方提供的工具.第三方服务其实是有python demo的,本想研究下实际的python sdk搞个demo开发的,但是发现有些组建装起来确实头大,而且本公 ...
- javascript静态页面传值的三种方法分享
一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 复制代码 代码如下: <input type="text" ...
- Microsoft Visual Studio 2012正式版官方下载
Microsoft Visual Studio 2012正式版官方下载 首先声明,看到园子里还没有类似的新闻,所以斗胆发首页,如有不妥之处,请移除并谅解. 虽然之前已经又用到泄露的MSDN正式版,但今 ...