CSS,Jquery精美进度条和滑动条(滑块)插件-阿里云开发者社区

开发者社区> cometwo123> 正文

CSS,Jquery精美进度条和滑动条(滑块)插件

简介:
+关注继续查看

这里写图片描述


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Jquery精美进度条和滑动条插件,CSS精美进度条和滑动条插件,Html进度条插件,html滑动条插件"/>
<meta name="description" content="CSS3和Jq制作的Html滑动条和进度条插件-彭亚欧个人博客代码演示中心" />
<link rel="stylesheet" href="http://www.pengyaou.com/LegendsZ/Design/DemoShow.css"/>
<title>CSS,Jquery精美进度条和滑动条插件</title>
<style type="text/css">
#Main {
    width: 70%;
    height: 300px;
    margin: 0 auto;
    margin-top: 100px;
}
#scrollBar {
    width: 80%;
    height: 10px;
    background-color: #ccc;
    margin: 0 auto;
    margin-top: 50px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
}
#scroll_Track {
    width: 0px;
    height: 10px;
    background-color: #ff4400;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
#scroll_Thumb {
    height: 25px;
    width: 25px;
    background-color: #efefef;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 5px #ccc;
    -moz-box-shadow: 0px 0px 5px #ccc;
    box-shadow: 0px 0px 5px #ccc;
    position: absolute;
    margin-top: -18px;
    cursor: pointer;
}
#scroll_Thumb:hover {
    background-color: #ff4400;
    border: 1px solid #fff;
}
#progressBar {
    width: 80%;
    height: 10px;
    background-color: #ccc;
    margin: 0 auto;
    margin-top: 50px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
#progressBar_Track {
    width: 200px;
    height: 10px;
    background-color: #ff4400;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
#beian {
    text-align: center;
    float: left;
    width: 100%;
    margin-top: 50px
}
#beian a {
    color: gray;
    font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>





      <div id="Demo">
        <div id="Main">
          <div id="scrollBar">
            <div id="scroll_Track"></div>
            <div id="scroll_Thumb"></div>
          </div>
          <p id="scrollBarTxt" style="text-align:center;"></p>
          <div id="progressBar">
            <div id="progressBar_Track"></div>
          </div>
          <p id="progressBarTxt" style="text-align:center;"></p>
        </div>

      </div>


</body>
<script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js"></script>

<script type="text/javascript">
        $(document).ready(function(e) {
            //设置最大值
            ScrollBar.maxValue=100;
            //初始化
            ScrollBar.Initialize();
            //设置最大值
            ProgressBar.maxValue=100;
            //设置当前刻度
            var index=0;
            var mProgressTimer=setInterval(function(){
                index+=2;
                ProgressBar.SetValue(index);
                },100);

        });
        var ScrollBar = {
            value: 20,
            maxValue: 100,
            step: 1,
            currentX: 0,
            Initialize: function() {
                if (this.value > this.maxValue) {
                    alert("给定当前值大于了最大值");
                    return;
                }
                this.GetValue();
                $("#scroll_Track").css("width", this.currentX + 2 + "px");
                $("#scroll_Thumb").css("margin-left", this.currentX + "px");
                this.Value();
                $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
            },
            Value: function() {
                var valite = false;
                var currentValue;
                $("#scroll_Thumb").mousedown(function() {
                    valite = true;
                    $(document.body).mousemove(function(event) {
                        if (valite == false) return;
                        var changeX = event.clientX - ScrollBar.currentX;
                        currentValue = changeX - ScrollBar.currentX-$("#Demo").offset().left;
                        $("#scroll_Thumb").css("margin-left", currentValue + "px");
                        $("#scroll_Track").css("width", currentValue + 2 + "px");
                        if ((currentValue + 25) >= $("#scrollBar").width()) {
                            $("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 25 + "px");
                            $("#scroll_Track").css("width", $("#scrollBar").width() + 2 + "px");
                            ScrollBar.value = ScrollBar.maxValue;
                        } else if (currentValue <= 0) {
                            $("#scroll_Thumb").css("margin-left", "0px");
                            $("#scroll_Track").css("width", "0px");
                        } else {
                            ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));
                        }
                        $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
                    });
                });
                $(document.body).mouseup(function() {
                    ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));
                    valite = false;
                    if (ScrollBar.value >= ScrollBar.maxValue) ScrollBar.value = ScrollBar.maxValue;
                    if (ScrollBar.value <= 0) ScrollBar.value = 0;
                    $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
                });
            },
            GetValue: function() {
                this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);
            }
        }
        var ProgressBar = {
            maxValue: 100,
            value: 20,
            SetValue: function(aValue) {
                this.value=aValue;
                if (this.value >= this.maxValue) this.value = this.maxValue;
                if (this.value <= 0) this.value = 0;
                var mWidth=this.value/this.maxValue*$("#progressBar").width()+"px";
                $("#progressBar_Track").css("width",mWidth);
                $("#progressBarTxt").html(this.value+"/"+this.maxValue);
            }
        }
    </script>


<!--[if IE 7]>
   <style type="text/css">
            .menuItem{ margin-left:-130px; } 
        </style>
    <![endif]-->

</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android managedQuery查询如果加入group by条件(及其猥琐的方法)
下午研究了很久都没有找到如何在managedQuery方法里面加入group by 条件最后灵机一动! 想出了一个及其猥琐的方法解决此问题! 此时我的需求是查出Calllog中的号码!相同的自然只出一个结果! 正常的查询是这样的! Cursor phoneCursor = this.
592 0
PostgreSQL 11 相似图像搜索插件 imgsmlr 性能测试与优化 2 - 单机分区表 (dblink 异步调用并行) (4亿图像)
标签 PostgreSQL , imgsmlr , GiST , 图像特征值 , 小波转换 背景 续 《PostgreSQL 11 相似图像搜索插件 imgsmlr 性能测试 1 - 单机单表 (4亿图像)》 使用分区表+dblink异步接口并行调用。
823 0
PostgreSQL 11 相似图像搜索插件 imgsmlr 性能测试与优化 1 - 单机单表 (4亿图像)
标签 PostgreSQL , imgsmlr , GiST , 图像特征值 , 小波转换 背景 imgsmlr是PostgreSQL的一款支持以图搜图的插件, https://github.com/postgrespro/imgsmlr 这个插件新增了: 1、几种图像特征值数据类型, 2、图像特征值相似算子, 3、图像特征值相似排序索引支持, 4、图像相似排序的索引(通过扩展GiST索引接口实现)支持, 5、png,gif等图像格式特征值提取函数。
1289 0
赞!带进度条的 jQuery 文件拖放上传插件
  jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果。作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 Hack 的方式使之兼容那些古老的浏览器。
790 0
PostgreSQL 任意字段数组合 AND\OR 条件,指定返回结果条数,构造测试数据算法举例
标签 PostgreSQL , 构造测试数据 , 任意字段组合AND,OR查询 , 指定结果集大小 背景 在进行一些实际的POC测试时,需要根据业务提出的需求构造数据,比如按照任意字段数组合 AND\OR 条件,指定返回结果条数,构造测试数据。
942 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4512 0
PostgreSQL 11 相似图像搜索插件 imgsmlr 性能测试与优化 3 - citus 8机128shard (4亿图像)
标签 PostgreSQL , imgsmlr , GiST , 图像特征值 , 小波转换 , citus 背景 续 《PostgreSQL 11 相似图像搜索插件 imgsmlr 性能测试 1 - 单机单表 (4亿图像)》 《PostgreSQL 11 相似图像搜索插件 imgsmlr 性能...
1020 0
python环境安装和在eclipse中插件的使用
目录 安装Python python for eclipse插件安装 配置PyDev插件 测试 python环境安装和python for eclipse插件安装1、下载python环境和python for eclipsepython环境和python for eclipse插件下载地址 在Windows命令行中使用Python 如果你想要从Windows命
1479 0
+关注
1028
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载