有背景颜色的进度条

<style>
*{margin:0;padding:0;}
body{text-align:center;background:#000000;color:#FFFFFF;}
h1{margin:30px;font-weight:bold;}
hr{margin:30px;}
#Bos{width:500px;height:50px;background:#FFFFFF;border:1px solid #FFFF00;position:relative;margin:50px auto;border-top-left-radius:25px; border-bottom-left-radius:25px; border-bottom-right-radius:25px;border-top-right-radius:25px; overflow:hidden;}
#div1{width:50px;height:50px;background:#FF0000;position:absolute;border-radius:50%;}
#div2{width:auto; background:#FF00FF;height:50px;position:absolute;}
</style>
<script>
window.onload=function()
{
document.onmousedown=function(ev)
{

var oEvent=ev||event;
var oBos=document.getElementById(‘Bos‘);
var odiv1=document.getElementById(‘div1‘);
var odiv2=document.getElementById(‘div2‘);
var disX=0;
disX=oEvent.clientX-odiv1.offsetLeft;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
if(l<0)
{
l=0;
}
if(l>oBos.offsetWidth-odiv1.offsetWidth)
{
l=oBos.offsetWidth-odiv1.offsetWidth;

}
else
{
odiv2.offsetwidth=l;
odiv2.style.width = odiv2.offsetwidth+odiv1.offsetWidth/2+‘px‘;
}
odiv1.style.left=l+"px";

}
document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
</script>
</head>

<body>
<h1>有背景的进度条</h1>
<hr />
<div id="Bos">
<div id="div2"></div>
<div id="div1"></div>
</div>
</body>

时间: 2024-11-06 07:32:41

有背景颜色的进度条的相关文章

自定义带有渐变颜色的进度条

在项目中用到了渐变颜色的进度条 样式如下: 1.设置背景色颜色 2.设置边框圆角大小 3.设置渐变的颜色个数 4.设置渐变颜色 5.设置显示,隐藏进度条动画条纹 Demo地址:https://github.com/xqG/gradual-ProgressBar

自定义控件之圆形颜色渐变进度条--SweepGradient

前几天在群里面有人找圆形可颜色渐变进度条,其中主要的知识点是SweepGradient: mSweepGradient = new SweepGradient(240, 360, new int[] { Color.CYAN, Color.DKGRAY, Color.GRAY, Color.LTGRAY, Color.MAGENTA, Color.GREEN, Color.TRANSPARENT, Color.BLUE }, null); 如上:第三个参数为渐变颜色内容,前两个是坐标信息,240

渐变颜色的进度条WGradientProgress-备用

今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移动的,这里称之为WGradientProgress. 先来看看我们的目标长什么样子: WGradientProgress的使用方法很简单,主要有展示接口以及隐藏接口,目前显示的位置有两种选择: WProgressPosDown        //progress is on the down border

有背景颜色有%的进度条

<style> *{margin:0;padding:0;} body{text-align:center;background:#000000;color:#FFFFFF;} h1{margin:30px;font-weight:bold;} hr{margin:30px;} #Bos{width:500px;height:50px;background:#FFFFFF;border:1px solid #FFFF00;position:relative;margin:50px auto;b

超酷jQuery进度条加载动画集合

在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度条加载动画,每一个都非常具有创意.如果你喜欢,可以下载源码并将它们应用到自己的网站中去. HTML5 Canvas发光Loading动画 它是一个Loading加载动画,并不能实现具体进度的加载,但是可以提示用户数据或者页面正在加载.并且该应用利用Canvas绘制动画,效果非常不错. DEMO演示 

带进度条的webview,支持网页前进和返回、刷新,返回键goBack等.

转载请注明出处http://blog.csdn.net/sinat_25689603/article/details/51917294 本文出自yedongyang的博客 1.介绍 一款很简单的webview,头部有进度条,支持网页前进和返回.刷新,返回键goBack等,可定制性强,漂亮简洁大方,集成到软件里很方便,功能还不复杂. 2.截图 3.代码介绍 因为有标题头,所以这里我是继承LinearLayout. public class WebViewLayout extends LinearL

酷炫进度条 自定义SeekBar

前些天一同学给了我一个ui图,是这样子的: 需求: 1.看了ui图可以知道这类似android自带的seekbar控件, 2.一个水平进度条和一个圆形进度条: 3.圆形进度条显示环形刻度和当前进度值: 4.并且圆形进度可滑动操作: 最终实现效果: 废话不多说上代码: 水平的进度条:HorizonalProgress.class package com.totcy.magicprogress; import android.animation.ObjectAnimator; import andr

自定义view之圆形进度条

本节介绍自定义view-圆形进度条 思路: 根据前面介绍的自定义view内容可拓展得之: 1:新建类继承自View 2:添加自定义view属性 3:重写onDraw(Canvas canvas) 4:实现功能 下面上代码 1.自定义view代码: public class CustomView extends View { //背景圆环颜色 private int circleColor; //进度条颜色&字体颜色(为了美观,所以设计字体颜色和进度条颜色值一致) private int seco

CocoStudio使用笔记2:cocos2dx3.9使用CocoStudio制作的进度条LoadingBar

作为菜鸟曾一直使用手写cocos2dx界面,最近一直在研究cocostudio这个工具.尝试着使用工具来快速的开发游戏,折腾了一个多星期了,每天不停的搜索资料. 记录下本人试用cocostudio制作的启动界面所遇到的问题和经验,方便以后查阅. 首先设置编辑器的分辨率为480*800安卓分辨率的大小. 添加一个sprite精灵使用大小为480*800的图片(background.png)作为背景,然后添加sprite精灵作为游戏logo(logo.png),继续添加sprite作为进度条的背景(