怎么用JQ控制多个相同的class中的样式style的width的变化 如下图

qq_20836361 2015-09-11 05:05:55

在div中自定义一个属性然后赋值1分的话星星就会填满一半 2分就填满星星 以此类推..根据分值改变 div的长度 怎么实现 总分10分 在线等前端大神解答！
...全文
850 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_20836361 2015-09-14
  • 打赏
  • 举报
 回复
非常感谢13楼 给我的答案是正确的 同时感谢14楼给出的建议 同样也是正确的
liusaint1992 2015-09-13
  • 打赏
  • 举报
 回复
忘记上资源：

bg1.png
bg2.png

效果图。
liusaint1992 2015-09-13
  • 打赏
  • 举报
 回复
中间有几句没有用的代码忘记删除了。 var yellow = 0; //黄色三角的数量 var grey = 0 ; //半黄半灰三角。 var black = 0; //黑色三角。 each函数应该比for循环好用一点吧。
liusaint1992 2015-09-13
  • 打赏
  • 举报
 回复
对，是图片，4楼跟楼上的思路很正点。 我又做了一个，不过其实楼上的就很完美了。不过图片之间没有间距。 主要是上下两层。 下层是灰色星星。上层是黄色。 调整上层width这个思路。 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>test</title>
	<style type="text/css">
		.demo{background-image: url(bg1.png);
			width: 180px;
			height: 32px;
			margin-top: 10px;
		}
		.yellowstar{
			background-image: url(bg2.png);
			width: 180px;
			height: 32px;
		}
	</style>

</head>
<body onload="showStars()">
	<script src="jq/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">

		function showStars(){
			var domLength = $(".demo").length;
			for(var f=0;f<domLength;f++){
			var yellow = 0;  //黄色三角的数量
			var grey = 0 ; //半黄半灰三角。
			var black = 0; //黑色三角。
			var result = parseInt($(".demo").eq(f).attr("data-scroe")); //获取对应的分值。
			var yellowstarWidth = 0;		
			yellowstarWidth = 16*result + (Math.ceil(result/2) -1)*5; //计算宽度
			$(".yellowstar").eq(f).css("width",yellowstarWidth);
		}

	}
</script>
<div  class="demo"  data-scroe="3" ><div class="yellowstar"></div></div>
<div  class="demo"  data-scroe="6" ><div class="yellowstar"></div></div>
<div  class="demo"  data-scroe="9" ><div class="yellowstar"></div></div>
<div  class="demo"  data-scroe="10" ><div class="yellowstar"></div></div>
</body>
</html>
天际的海浪 2015-09-13
  • 打赏
  • 举报
 回复
引用 10 楼 qq_20836361 的回复:
是图片来的 他就是从data-srcoe 获取分数 从而改变星星的长度 像美团那种顾客 评完分后 会在首页显示多少颗星 其实就是style中的width在变

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title> 页面名称 </title>
<style type="text/css">
.demo {
	width: 105px;
	height: 24px;
	background-image: url("http://c.csdnimg.cn/jifen/images/xunzhang/xunzhang/lanhua.png");
}
.demo div {
	width: 0%;
	height: 24px;
	background-image: url("http://c.csdnimg.cn/jifen/images/xunzhang/xunzhang/huanghua.png");
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".demo").each(function () {
		$(this).find("div").css("width",$(this).data("scroe")*10+"%");
	});
});
</script>
</head>
<body>
<div class="demo" data-scroe="1"><div></div></div>
<div class="demo" data-scroe="2"><div></div></div>
<div class="demo" data-scroe="3"><div></div></div>
<div class="demo" data-scroe="4"><div></div></div>
<div class="demo" data-scroe="5"><div></div></div>
<div class="demo" data-scroe="6"><div></div></div>
<div class="demo" data-scroe="7"><div></div></div>
<div class="demo" data-scroe="8"><div></div></div>
<div class="demo" data-scroe="9"><div></div></div>
<div class="demo" data-scroe="10"><div></div></div>
</body>
</html>
liusaint1992 2015-09-13
  • 打赏
  • 举报
 回复


效果图。
liusaint1992 2015-09-13
  • 打赏
  • 举报
 回复
引用 8 楼 qq_20836361 的回复:
如果从后台传一个值过来 像这样<div class="demo" data-scroe="传来的分数" ></div> 怎么让他改变星星的长度呢


稍微修改了一下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
ul,li{
list-style: none;
}
ul{
width: 250px;height: 30px;
}
li{
border: 1px #ccc solid;height: 30px;width:30px;float: left;margin-left: 5px;
}
.yellow{
background-color: yellow;
}
.grey{
background-color: grey;
}
.black{
background-color: black;
}
</style>

</head>
<body onload="showStars()">
<script src="jq/jquery-1.11.2.min.js"></script>
<script type="text/javascript">

function showStars(){

var domLength = $(".demo").length;

for(var f=0;f<domLength;f++){
var yellow = 0; //黄色三角的数量
var grey = 0 ; //半黄半灰三角。
var black = 0; //黑色三角。
var result = parseInt($(".demo").eq(f).attr("data-scroe")); //获取对应的分值。
yellow = parseInt(result/2);
grey = result%2;
black = 5 - yellow - grey;
$(".demo").eq(f).append('<ul class="star_ul">'+result+'分</ul>');
for(var i =0 ;i<yellow;i++ ){
$(".star_ul:last").append('<li class="yellow"></li>');
}
for(var j= 0;j<grey; j++){
$(".star_ul:last").append('<li class="grey"></li>');
}
for(var k= 0;k<black; k++){
$(".star_ul:last").append('<li class="black"></li>');
}

}

}
</script>
<div class="demo" data-scroe="3" ></div>
<div class="demo" data-scroe="6" ></div>
<div class="demo" data-scroe="9" ></div>
<div class="demo" data-scroe="10" ></div>

</body>
</html>


楼主试一试

qq_20836361 2015-09-13
  • 打赏
  • 举报
 回复
是图片来的 他就是从data-srcoe 获取分数 从而改变星星的长度 像美团那种顾客 评完分后 会在首页显示多少颗星 其实就是style中的width在变
天际的海浪 2015-09-13
  • 打赏
  • 举报
 回复
引用 8 楼 qq_20836361 的回复:
如果从后台传一个值过来 像这样<div class="demo" data-scroe="传来的分数" ></div> 怎么让他改变星星的长度呢
你那个星星是字符还是图片
qq_20836361 2015-09-13
  • 打赏
  • 举报
 回复
如果从后台传一个值过来 像这样<div class="demo" data-scroe="传来的分数" ></div> 怎么让他改变星星的长度呢
liusaint1992 2015-09-11
  • 打赏
  • 举报
 回复
楼上记得把 juery引用放到前面去。不然会出错。
liusaint1992 2015-09-11
  • 打赏
  • 举报
 回复
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> ul,li{ list-style: none; } ul{ width: 250px;height: 30px; } li{ border: 1px #ccc solid;height: 30px;width:30px;float: left;margin-left: 5px; } .yellow{ background-color: yellow; } .grey{ background-color: grey; } .black{ background-color: black; } </style> </head> <body> <script type="text/javascript"> $(document).ready(function(){ var starArr=[3,6,9];//得分的数组。当然也可以有别的信息在里面。 var yellow = 0; //黄色三角的数量 var grey = 0 ; //半黄半灰三角。 var black = 0; //黑色三角。 $.each(starArr,function(i,result){ yellow = parseInt(result/2); grey = result%2; black = 5 - yellow - grey; $(".demo").append('<ul class="star_ul">'+result+'分</ul>'); for(var i =0 ;i<yellow;i++ ){ $(".star_ul:last").append('<li class="yellow"></li>'); } for(var j= 0;j<grey; j++){ $(".star_ul:last").append('<li class="grey"></li>'); } for(var k= 0;k<black; k++){ $(".star_ul:last").append('<li class="black"></li>'); } }); }) </script> <div class="demo"> </div> <script src="jq/jquery-1.11.2.min.js"></script> </body> </html> 我这里是用的不同的颜色分别代表 黄星星，半星，灰星。 你自己给css替换上对应的背景图片就可以用了。
vblj 2015-09-11
  • 打赏
  • 举报
 回复
不好意思，上面说的那个切图空隙应该是两个星星之间空隙的一半， 然后left = 分数*(整体div/10)(整体div/10=单个星星的一半+星星之间的空隙的一半)
vblj 2015-09-11
  • 打赏
  • 举报
 回复
整体思路应该是这样的： 1.下面一层div：黄色星星5个一整块作背景图（注意切图的时候第一个星星前面和最后一个星星后面都留空白，等于每两个星星之间的空白） 2.上面一层div：灰色星星5个一整块作背景图（div定位在黄色星星上面，开始的时候应该是完全盖住，一分都没有，显示都是灰色） 3.jq部分： 根据分数，上面一层灰色的星星往右移left left = 分数*(整体div/10)(整体div/10=单个星星的一半+星星之间的空隙) 然后你有11种情况，灰色星星有11个类名。star0- star10, 0分就给灰色星星加类名star0,依次类推。 用for循环给这11种情况加不同类名和不同的left值 for(var i=0;i<=10;i++) { var left = i*(divWidth/10) $('.star'+i).css('left',left) } 可以实现楼主想要的，但是思路可能跟楼主的不一样
天际的海浪 2015-09-11
  • 打赏
  • 举报
 回复
简单的说 让两个相同文字的层重叠在一起，用jq改变上层的width即可
zpjshiwo77 2015-09-11
  • 打赏
  • 举报
 回复
然后这种评分应该使用<canvs>标签来做的吧，感觉好像不会用div来做。
zpjshiwo77 2015-09-11
  • 打赏
  • 举报
 回复
虽然我没做过，但我感觉是这样的先定义一div，宽高等于你星星的高度和宽度，然后再定义一个子div，当获值一分的时候算出weith=1/2=50%，用JS给子div赋值height=100%，weith:weith 。思路感觉是这样的
JQ 统计图 柱状图
JQ 统计图 柱状图
checkbox 图片 兼容 JQ
checkbox 图片 兼容IE,JQ实现
jq图片滚动，animate()方法应用
jq图片滚动，animate()方法应用，animate()方法应用
JQ全屏banner
JQ 全屏banner 完美 单向循环滚动 背景颜色跟图片要一致
用jquery实现多张照片原图预览
使用jquery插件能够预览多张照片原图的插件。
JavaScript

87,964

社区成员

224,662

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章