脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery手动拖动控制进度条

jQuery实现的手动拖动控制进度条效果示例【测试可用】

 更新时间：2018年04月18日 10:04:37   作者：包子源  
这篇文章主要介绍了jQuery实现的手动拖动控制进度条效果,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现的手动拖动控制进度条效果。分享给大家供大家参考，具体如下：

这是一个手动控制进度条的小程序，分享给大家：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net jQuery手动拖动进度条</title>
<style type="text/css">
 #box{position: relative; width: 200px; height: 50px; border: 1px solid #eee; margin: 50px auto 0;}
 #bg{height: 10px; margin-top: 19px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
 #bgcolor{background: #5889B2; width: 0; height: 10px; border-radius: 5px;}
 #bt{width: 34px; height: 34px;background-color: red; border-radius: 17px; overflow: hidden; position: absolute; left: 0px; margin-left: -17px; top: 8px; cursor: pointer;}
 #text{width: 200px; margin: 0 auto; font-size: 16px; line-height: 2em;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
 <div id="box">
 <div id="bg">
  <div id="bgcolor"></div>
 </div>
 <div id="bt"></div>
 </div>
 <div id="text"></div>
 <script type="text/javascript">
 (function($){
 var $box = $('#box');
 var $bg = $('#bg');
 var $bgcolor = $('#bgcolor');
 var $btn = $('#bt');
 var $text = $('#text');
 var statu = false;
 var ox = 0;
 var lx = 0;
 var left = 0;
 var bgleft = 0;
  $btn.mousedown(function(e){
  lx = $btn.offset().left;
  ox = e.pageX - left;
  statu = true;
  });
  $(document).mouseup(function(){
  statu = false;
  });
  $box.mousemove(function(e){
  if(statu){
   left = e.pageX - ox;
   if(left < 0){
   left = 0;
   }
   if(left > 200){
   left = 200;
   }
   $btn.css('left',left);
   $bgcolor.width(left);
   $text.html('位置:' + parseInt(left/2) + '%');
  }
  });
  $bg.click(function(e){
  if(!statu){
   bgleft = $bg.offset().left;
   left = e.pageX - bgleft;
   if(left < 0){
   left = 0;
   }
   if(left > 200){
   left = 200;
   }
   $btn.css('left',left);
   $bgcolor.stop().animate({width:left},200);
   $text.html('位置:' + parseInt(left/2) + '%');
  }
  });
 })(jQuery);
 </script>
</div>
</body>
</html>

运行效果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Jquery ajax请求导出Excel表格的实现代码

    Jquery ajax请求导出Excel表格的实现代码

    下面小编就为大家带来一篇Jquery ajax请求导出Excel表格的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript右下角弹层及自动隐藏(自己编写)

    javascript右下角弹层及自动隐藏(自己编写)

    需要有个右下角弹层提示公告的，下面分享早些时候自己编写，以及现在还在应用的自动弹层，需要的朋友可以参考下
    2013-11-11
  • jQuery Validate初步体验(一)

    jQuery Validate初步体验(一)

    jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。 jQuery 是为改变你编写JavaScript 的方式而设计的，本文给大家分享jquery validate初步体验(一)，感兴趣的朋友一起学习吧
    2015-12-12
  • jQuery ul标签下拉菜单演示代码

    jQuery ul标签下拉菜单演示代码

    jQuery ul标签下拉菜单演示代码，需要使用基于jquery的下拉菜单效果的朋友可以参考下。
    2010-12-12
  • jQuery function的正确书写方法

    jQuery function的正确书写方法

    jQuery function想必大家都不会陌生，web前端开发人员经常会接触到，下面为大家介绍下它的正确书写方法，感兴趣的朋友可以参考下
    2013-08-08
  • jquery 跨域访问问题解决方法(笔记)

    jquery 跨域访问问题解决方法(笔记)

    对于js跨域访问，在先前也曾碰到过，但可能并没有认真去对待，可能查看过相关资料，但当着两天再次碰到这个问题时，走了不少弯路才找到问题原因。记下这次解决过程，为自己不再强大的记忆力默哀一下。
    2011-06-06
  • jQuery实现遍历XML节点和属性的方法示例

    jQuery实现遍历XML节点和属性的方法示例

    这篇文章主要介绍了jQuery实现遍历XML节点和属性的方法,涉及jQuery针对xml文件的加载、节点遍历等相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • jQuery学习5 jQuery事件模型

    jQuery学习5 jQuery事件模型

    jQuery 事件模型相关资料，需要的朋友可以参考下。
    2010-02-02
  • jQuery中使用Ajax获取JSON格式数据示例代码

    jQuery中使用Ajax获取JSON格式数据示例代码

    有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现，下面有个不错的示例，需要的朋友可以参考下
    2013-11-11
  • jQuery zTree插件快速实现目录树

    jQuery zTree插件快速实现目录树

    这篇文章主要为大家详细介绍了jQuery zTree插件快速实现目录树，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-08-08

最新评论