jquery进度条教程（jquery进度条）

大家好，小经来为大家解答以上问题。jquery进度条教程，jquery进度条很多人还不知道，现在让我们一起来看看吧！

1、 百度搜索jquery，找到框架官网，下载最新的jqueryJs文件，并添加到项目中。

2、 新建超文本标记语言页面，并将jqueryJs文件添加引入到页面中，在vs2015，可以直接将射流研究…拖拽到页面，会自动生成：scriptsrc='Scripts/jquery。量滴3.4.1.js'/脚本标签

3、 声明进度条的外边框及进度条的元素，这里我们统一使用差异来实现。

4、 divid='box'

5、 divid='bg'

6、 divid='bgcolor'/div

7、 /div

8、 divid='bt'/div

9、 /div

10、 divid='text'/div

11、 为了使进度条看起来更加美观，我们编写进度条的样式，以及拖拽点的样式。我们在页面头部，添加styletype='text/css'/style标签，在其内部添加如下css:

12、 styletype='text/css'

13、 #box{相对位置：宽度：200pxheight:50pxborder:1pxsolid#eeemargin:50pxauto0；}

14、 #BG{height:10pxmargin-top:19px；border:1px固体#DDDborder-radius:5px；飞越：隐藏；}

15、 #bgcolor{background:#5889B2；宽度：0；height:10pxborder-radius:5px；}

16、 #Bt{width:20pxheight:20px背景色：蓝色；border-radius:10px飞越：隐藏；位置：绝对；left:0px左边距：-10px；top:13pxcursor:指针；}

17、 #text{width:200pxmargin:0自动；字体大小：16px行高：2em}

18、 /风格

19、 样式增加完成后，我们的进度条就很好看了，为了能使进度条拖动，我们还需要使用框架来编写js，使其能够支持动态拖动。我们在页面的地步增加脚本标签，在其内部，编写如下代码：

20、 脚本类型='文本/javascript'

21、 （函数($)

22、 {

23、 var$box=$('#box')；

24、 var$BG=$('#BG')；

25、 var$bgcolor=$('#bgcolor')；

26、 var$BTN=$('#Bt')；

27、 var$text=$('#text')；

28、 varstatu=false

29、 varox=0；

30、 varLX=0；

31、 varleft=0；

32、 varBGleft=0；

33、 $btn.mousedown(函数(五)

34、 {

35、 lx=$btn.offset().左；

36、 ox=e.pagex-left；

37、 状态=真

38、 });

39、 $(文档)。mouseup(函数()

40、 {

41、 状态=假

42、 });

43、 $box.mousemove(函数(五)

44、 {

45、 如果（状态)

46、 {

47、 left=e.pagex-ox；

48、 如果(左0)

49、 {

50、 左=0;

51、 }

52、 如果（左200)

53、 {

54、 左=200;

55、 }

56、 $btn.css('left'，左);

57、 $bgcolor.width(左);

58、 $text.html('进度：'parseint(left/2)'%')；

59、 }

60、 });

61、 $bg.click(函数(五)

62、 {

63、 如果(!状态)

64、 {

65、 bgleft=$bg.offset().左；

66、 left=e.pagex-BGleft；

67、 如果(左0)

68、 {

69、 左=0;

70、 }

71、 如果（左200)

72、 {

73、 左=200;

74、 }

75、 $btn.css('left'，左);

76、 $bgcolor.stop().animate({width:left}，200)；

77、 $text.html('进度：'parseint(left/2)'%')；

78、 }

79、 });

80、 })(jQuery)；

81、 /脚本

82、 到这里我们就完成了使用框架制作手动进度条的功能，我们把页面保存一下，然后，右键页面运行，最终的效果如图：

本文到此结束，希望对大家有所帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！