jquery 手动进度条如何设置
的有关信息介绍如下:jquery是一款非常好用的js框架,可以实现很多非常炫的效果。那么如何使用jquery来实现一个手动的进度条,小编给大家介绍一下。
百度搜索jquery,找到jquery官网,下载最新的jquery Js文件,并添加到项目中。
新建html页面,并将jquery Js文件添加引入到页面中,在vs2015,可以直接将js拖拽到页面,会自动生成:标签
声明进度条的外边框及进度条的元素,这里我们统一使用div来实现。
为了使进度条看起来更加美观,我们编写进度条的样式,以及拖拽点的样式。我们在页面头部,添加标签,在其内部添加如下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: 20px; height: 20px; background-color: blue; border-radius: 10px; overflow: hidden; position: absolute; left: 0px; margin-left: -10px; top: 13px; cursor: pointer; }
#text { width: 200px; margin: 0 auto; font-size: 16px; line-height: 2em; }
样式增加完成后,我们的进度条就很好看了,为了能使进度条拖动,我们还需要使用jquery来编写js,使其能够支持动态拖动。我们在页面的地步增加
到这里我们就完成了使用jquery制作手动进度条的功能,我们把页面保存一下,然后,右键页面运行,最终的效果如图: