这个是PC端的滑动进度条效果：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.progress{position: relative; width:300px;margin:100px auto;}

.progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}

.progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}

.progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff;

left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}

.progress_btn:hover{border-color:#F7B824;}

</style>

</head>

<body>

    <div class="progress">

        <div class="progress_bg">

            <div class="progress_bar"></div>

        </div>

        <div class="progress_btn"></div>

        <div class="text">0%</div>

    </div>

    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

    $(function(){

    var tag = false,ox = 0,left = 0,bgleft = 0;

    $('.progress_btn').mousedown(function(e) {

        ox = e.pageX - left;

        tag = true;

    });

    $(document).mouseup(function() {

        tag = false;

    });

    $('.progress').mousemove(function(e) {//鼠标移动

        if (tag) {

            left = e.pageX - ox;

            if (left <= 0) {

                left = 0;

            }else if (left > 300) {

                left = 300;

            }

            $('.progress_btn').css('left', left);

            $('.progress_bar').width(left);

            $('.text').html(parseInt((left/300)*100) + '%');

        }

    });

    $('.progress_bg').click(function(e) {//鼠标点击

        if (!tag) {

            bgleft = $('.progress_bg').offset().left;

            left = e.pageX - bgleft;

            if (left <= 0) {

                left = 0;

            }else if (left > 300) {

                left = 300;

            }

            $('.progress_btn').css('left', left);

            $('.progress_bar').animate({width:left},300);

            $('.text').html(parseInt((left/300)*100) + '%');

        }

    });

});</script>

</body>

</html>

js---PC端滑动进度条的更多相关文章

  1. Axure教程：滑动进度条、圆形进度环的复杂交互效果实现方法

    滑动条.进度条.进度环,是产品原型中比较常见的进度展示功能.今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果. 效果一.可拖动.可显示进度值.可计算多个页面均值的滑动进度 ...

  2. JS pc端和移动端共同实现复制到剪贴板功能实现

    JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...

  3. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  4. js---手机端滑动进度条

    最近做项目,有一个滑动音乐播放进度条的效果,但是使用input的 range 来做会出现一些问题,想了想还是用JS来写.直接上代码: <!doctype html> <html la ...

  5. JS -- 异步加载进度条

    今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1. ...

  6. js页面加载进度条(这个就比较正式了，改改时间就完事儿)

    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...

  7. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. CSS3+JS实现静态圆形进度条

    一.实现原理 首先,我们来一个圆(黑色).接着,再来两个半圆,将黑色的圆遮住.(为了演示,左右两侧颜色不一样)这时候,我们顺时针旋转右侧蓝色的半圆,下面的黑色圆就会暴露出来,比如我们旋转45度(12. ...

  9. js移动端滑动效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. django 配置中STATICFILES_DIRS 和STATIC_ROOT不能同时出现

    系统环境: win7 django版本查看: 启动django项目的时候,一直找不到静态资源,很奇怪放在linux服务器上的时候好好的,拿下来随便修改了配置就说url找不到了. 用wingIDE没有任 ...

  2. 【百度地图API】制作多途经点的线路导航——路线坐标规划

    一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...

  3. 用python开发android应用 【转载】

    用python开发android应用 [转载] 转载自:http://www.miui.com/thread-995114-1-1.html Python是动态语言,比较简洁.Android不直接支持 ...

  4. ASP.NET MVC 4 (四) 控制器扩展

    MVC的标准流程是请求传递给控制器,由控制器action方法操作数据模型,最后交由视图渲染输出,这里忽略了两个细节,就是MVC是如何创建相应控制器实例,又是如何调用控制器action方法的,这就必须讲 ...

  5. ios开发之--armv7,armv7s,arm64,i386,x86_64详解

    有时候在运行的时候,经常出现诸如i386的错误,最新一些可能会出现 No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch ...

  6. Memcached 数据导出与导入

    我们使用 memcached-tool 命令来导出数据: [root@localhost ~]# memcached-tool dump > /tmp/.txt Dumping memcache ...

  7. [Shell] Shell 中的算术

    Shell 脚本变量默认是作为字符串处理,而不是数字,这使得在 Shell 脚本做数学运算显得较为复杂.在保持脚本编程规范和更好的算术支持方便,Perl 和 Python 会是更好的选择.但是你仍然可 ...

  8. hadoop JOB的性能优化实践

    使用了几个月的hadoopMR,对遇到过的性能问题做点笔记,这里只涉及job的性能优化,没有接触到 hadoop集群,操作系统,任务调度策略这些方面的问题. hadoop MR在做大数据量分析时候有限 ...

  9. React Native(十二)——嵌套WebView中的返回处理

    情景描述: 从一个名为"My"的组件点击进去,进入一个列表(该列表内容为webView中内容),其中一个webView也可以点击进入详情页(也为webView),但是如果对导航栏不 ...

  10. no matching function for call to ‘std::basic_string<char>::assign(std::string&, int)

    使用string中的assign赋值函数报错,代码为: text0.assign(line,i+); 其中text0与line都为string类型 最后发现assign函数的原型为 string &a ...