32顶

jquery实现拖拽进度条并显示百分比的特效代码

稿源：互联网 2018-09-02 22:42:23 点击： 27584 撤稿纠错

以下讨论的是和jquery 拖拽进度条百分比相关的jquery实现拖拽进度条并显示百分比的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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></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: url(http://js.alixixi.com/uploadpic/201809021836014573.png) no-repeat center center; 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 type="text/javascript" src="http://www.alixixi.com/script/jquery-1.8.3.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实现拖拽进度条并显示百分比的特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090294884.shtml方便下次再访问哦。

·上一篇： 一款在线web网页版计算器JS代码程序源码
·下一篇： 图像图片始终保持位于网页垂直及水平居中的特效代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

jquery实现拖拽进度条并显示百分比的特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻