前端笔记——五角星评分（半星+一星鼠标移动版）

最新推荐文章于 2022-04-11 21:57:04 发布

aleave

最新推荐文章于 2022-04-11 21:57:04 发布

阅读量838

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/aleave/article/details/105025518

版权

前端专栏收录该内容

69 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				white-space: nowrap;
				word-wrap: nowrap;
			}
			li{
				padding: 10px;
			}
			img{
				width: 30px;
				height: 30px;
			}
			.one{
				// 不设置font-size:0的话，星星之间会存在空隙
				font-size: 0;
			}
		</style>
	</head>
	<body>
		<div class="one">
			<img src="css/no_star.png" >
			<img src="css/no_star.png" >
			<img src="css/no_star.png" >
			<img src="css/no_star.png" >
			<img src="css/no_star.png" >
		</div>
		<script type="text/javascript">
			var one=document.getElementsByClassName('one')[0];
			var children=one.children;
			console.log(children)
			for(let i=0;i<children.length;i++){
				children[i].index=i;// 添加一个索引属性
				// 注意:由于一个星表示一个元素，所以进入该星的时候是一星就一直是一星
				// 半星就一直是半星,除非移出之后再移入才会触发改变
				// 解决办法:真正去切割半个星星，分为10个img
				children[i].addEventListener('mouseenter',function(e){
				    for(var j=0;j<this.index;j++){
						children[j].setAttribute('src','css/star.png')
					}

					if(this.width*(this.index+1)-e.x<(this.width/2)){
						this.setAttribute('src','css/star.png')
						console.log('一星')
					}else{
						this.setAttribute('src','css/half_star.png')
					}
					
					// 对于大于该索引的就改为空
					for(var k=this.index+1;k<children.length;k++){
						children[k].setAttribute('src','css/no_star.png')
					}
				})
			}

		</script>
	</body>
</html>