css样式-淘宝评价

最新推荐文章于 2023-04-20 10:14:13 发布

鸿心

最新推荐文章于 2023-04-20 10:14:13 发布

阅读量709

点赞数

本文链接：https://blog.csdn.net/ZhiShiCaiFu/article/details/79452470

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0;}
body{font-family: "微软雅黑";}
.orange{color: orangered;}
.clear{clear: both;}

#scoreBar{
border: 1px solid black; 
position: relative;
margin: 0 auto;
width: 600px;
height: 90px;
}

#scoreBar h5{
border: 1px solid red;
float: left;
height: 20px;
}

#scoreBar .starBox{
border: 1px solid green;
float: left;
height: 20px;
overflow: hidden;
}

#scoreBar .starBox img{
position: relative;
cursor: pointer;
float: left;
padding: 0 2px;
/*border: 1px solid pink;*/
}

#scoreBar .starBox img.disp{
top: -27.5px;
}


#scoreBar .satisfy{
/*border: 1px solid blue;*/
position: absolute;
left: 32px;
background-image: url(img/icon.gif);
width: 169px;
height: 53px;
padding: 7px 5px;
display: none;
}
</style>

<script>
//AJAX 请求数据
var dataArr=[
["1分","很不满意","差的离谱....."],
["2分","不满意","部分有破损....."],
["3分","一般","质量一般....."],
["4分","满意","质量不错....."],
["5分","非常满意","质量非常好....."],
]

window.onload=function(){
var scoreBar = document.getElementById("scoreBar");
var starArr = scoreBar.getElementsByTagName("img");

var rightH5 = scoreBar.getElementsByTagName("h5")[1];
var rightH5_span = rightH5.getElementsByTagName("span")[0];
var rightH5_lable = rightH5.getElementsByTagName("label")[0];

var satisfy = scoreBar.getElementsByClassName("satisfy")[0];
var satisfy_h6 = satisfy.getElementsByTagName("h6")[0];
var satisfy_p = satisfy.getElementsByTagName("p")[0];

var lastclickIndex = -1;//上一次点击的star


for (var i =0;i<starArr.length;i++) {
starArr[i].index = i;
//star点击事件
starArr[i].onclick =function(){
//右边文本变化
rightH5_span.innerText = dataArr[this.index][0];
rightH5_lable.innerText = dataArr[this.index][2];

lastclickIndex = this.index;
}


//悬停到star上的事件
starArr[i].onmouseover=function(){
//清空历史记录
allStarHide();

//0~this.index 全部变为黄色
showStar(this.index);

//将satisfy变为显示
satisfy.style.display = "block";


//挪动satisfy的位置
satisfy.style.left = 32 + this.index*23 +"px";

//改变statisfay中的文字
satisfy_h6.innerText = dataArr[this.index][0]+
" "+dataArr[this.index][1];
satisfy_p.innerText = dataArr[this.index][2];

}

//鼠标移出star的事件
starArr[i].onmouseout=function(){
//所有star变为白色
allStarHide();

//恢复历史记录  0~上次点击的star显示
showStar(lastclickIndex);

//将satisfy变为none
satisfy.style.display = "none";
}
}

//功能性函数  0~index star变黄色
function showStar(index){
for (var i=0;i<=index;i++) {
starArr[i].className = "disp";
}
}

//功能性函数 所有star变白色
function allStarHide(){
for (var i=0;i<starArr.length;i++) {
starArr[i].className = "";
}
}
}

</script>

</head>
<body>
<div id="scoreBar">
<h5>点击星星就能评分</h5>
<div class="starBox">
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<div class="clear"></div>
</div>
<h5>
<span class="orange">2分</span>
<label>一半不是很满意。。。</label>
</h5>
<div class="clear"></div>


<div class="satisfy">
<h6 class="orange">2分</h6>
<p>一半不是很满意。。。...</p>
</div>
</div>

</body>
</html>

鸿心

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css样式-淘宝评价

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{margin: 0; padding: 0;} body{font-family: "微软雅黑";}
复制链接

扫一扫