CSS3结合jQuery实现的3中不同样式手动控制的进度条效果

可以自由更换样式的进度条效果,如果不需要动画效果只需要CSS3即可,只需要简单的代码即可手动控制进度显示的比例,非常实用的效果。
javascript代码,分别标识4种不同百分比的进度条:
[code]
<script>
$(document).ready(function(){
$(\'.quarter\').click(function(){
$(this).parent().prev().children(\'span\').css(\'width\',\'25%\');
});
$(\'.half\').click(function(){
$(this).parent().prev().children(\'span\').css(\'width\',\'50%\');
});
$(\'.three-quarters\').click(function(){
$(this).parent().prev().children(\'span\').css(\'width\',\'75%\');
});
$(\'.full\').click(function(){
$(this).parent().prev().children(\'span\').css(\'width\',\'100%\');
});
});
</script>
[/code]

1. 本站所有文章及资源来源于用户上传和网络,如有侵权请联系站长处理!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律,否则后果自负!
4. 如有链接无法下载、失效或广告,请联系管理员处理!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

中国站长社区 » CSS3结合jQuery实现的3中不同样式手动控制的进度条效果

发表评论