前端程序员应该怎么呈现下面的东西，后台人员才能看懂，运用jquery能实现么？
这要实现的效果html：//这个div是背景灰色<div><spanstyle="width:120px;"></span>这个是红色//下面的数值<i>60%</i><...
这要实现的效果
html： //这个div是背景灰色 <div> <span style="width:120px;"></span>这个是红色 //下面的数值 <i>60%</i> </div>
怎么获取div下的span的宽度，在绑定给div下<i>下 他的left。（我给了<i>在div下的绝地定位：position:relative;）最好是还能改变<i>的数值，谢谢~ 展开
html： //这个div是背景灰色 <div> <span style="width:120px;"></span>这个是红色 //下面的数值 <i>60%</i> </div>
怎么获取div下的span的宽度，在绑定给div下<i>下 他的left。（我给了<i>在div下的绝地定位：position:relative;）最好是还能改变<i>的数值，谢谢~ 展开
3个回答
展开全部
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="白菜编辑部">
<title>白菜编辑部</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: 0;
vertical-align: baseline;
}
body {
font: 14px/1.5 Consolas, 微软雅黑;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
div {
position: absolute;
border: 1px solid black;
background-color: #C7C7C7;
width: 200px;
height: 15px;
border: 1px solid black;
}
div>span {
background-color: red;
height: 15px;
position: absolute;
}
div>i {
position: absolute;
margin-left: 119px;
margin-top: -4px;
width: 5px;
height: 24px;
line-height: 58px;
color: #FFA500;
background-color: #FFA500;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
jQuery (function ($)
{
var doc = $ (document), span = $ ('span'), div = $ ('div'), w = parseFloat (div.css ('width'));
doc[0].oncontextmenu = doc[0].ondragstart = doc[0].onselectstart = function(){return false;};
doc.mouseup (function (e)
{
$ (this).unbind ('mousemove');
return destroy (e);
});
$ ('div>i').mousedown (function (e)
{
var me = $ (this);
var left = parseFloat (me.css ('margin-left'));
var temp = !$.browser.chrome ? doc[0].documentElement : doc[0].body;
var deltaX = e.clientX - (left - temp.scrollLeft);
doc.mousemove (function (evt)
{
var lft = evt.clientX - deltaX;
lft = lft > w - 1 ? w - 1 : lft;
lft = lft < 0 ? 0 : lft;
me.text (Math.round (lft * 100 / w) + '%');
me.css ('margin-left', lft - 1 + 'px');
span.css ('width', lft + 'px');
return destroy (evt);
});
return destroy (e);
});
});
var destroy = function (event)
{
if (!!$.browser.msie)
{
event.returnValue = false;
event.cancelBubble = true;
}
else
{
event.preventDefault ();
event.stopPropagation ();
}
return false;
}
</script>
</head>
<body>
<div>
<span style="width: 120px;"></span><i>60%</i>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你是要实现动态的进度条，还是写死的。写死的话，不难，通过css样式叠加就能完成。
追问
我知道css可以写，但那是静态的，但是我想用jquery 来控制span的宽度来移动下面的数值（60%）
追答
可以把代码贴出来吗？我以前做过这样的进度条的。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你怎么写后台人员都可以看不懂
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
