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

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

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

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www .JB 51。net Jquery手动拖动进度条/title style type=' text/CSS ' # box { position : relative；宽度： 200像素；高度： 50pxborder: 1px固体# eeemargin: 50px自动0;} # bg { height: 10px页边距-top : 19px；border: 1px固体# dddb order-radius : 5px；飞越：隐藏；} # bgcolor {背景： # 5889 B2；宽度： 0;高度： 5px边框-半径： 5px} # bt { width: 34pxheight: 34px背景-颜色：红色；边界半径： 17px飞越：隐藏；绝对位置：左： 0px左边距：-17px；top: 8pxcursor:指针；} # text { width : 200 pxmargin : 0 auto font-size : 16px；线高： 2em}/style脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本/头体div id=' box ' div id=' BG ' div id=' bgcolor '/div/div id=' Bt '/div/div id=' text '/div脚本类型=' text/JavaScript '(函数($){ 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(函数(e){ lx=$btn.offset().向左；ox=e.pageX -左侧；status=true })；$(文档)。鼠标上移(function(){ statu=false；});$box.mousemove(函数(e){ if(statu){ left=e . PageX-ox；if(left 0){ left=0；}如果(左200){左=200；} $btn.css('左，左)；$bgcolor.width(左);$text.html('位置：“Parsent(left/2)”“%”)；} });$bg.click(函数(e){ if(！状态){ BG left=$ BG。偏移量().向左；left=e . PageX-bgleft；if(left 0){ left=0；}如果(左200){左=200；} $btn.css('左，左)；$bgcolor.stop().动画({width:left}，200)；$text.html('位置：“Parsent(left/2)”“%”)；} });})(jQuery)；/script/div/body/html运行效果：

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

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