<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body {
color: #666;
font: 12px/2 Arial;
}
#star {
margin: 10px auto;
/* border: 1px solid red; */
width: 800px;
position: relative;
/*设置定位给p标签参考*/
}
ul {
list-style-type: none;
/* border: 1px solid green; */
margin: 0px 10px;
/*必须设置外边距才能上去*/
}
ul,
span {
float: left;
}
ul li {
float: left;
background: url('../images/star.png') no-repeat;
text-indent: -9999px;
/* 隐藏a标签中的文本 */
width: 24px;
margin: 0px;
}
#star li.on {
background-position: 0 -28px;
}
span {
/* border: 1px solid yellow; */
}
p {
/*后面要根据鼠标变动,更改p,所以要设置定位*/
/* border: 1px solid blue; */
position: absolute;
top: 20px;
width: 200px;
display: none;
}
p em {
color: #f60;
display: block;
font-style: normal;
}
strong {
color: #f60;
padding-left: 20px;
}
</style>
<body>
<div id="star">
<span>点击星星就能打分</span>
<ul>
<li>
<a href="javascript:;">1</a>
</li>
<li>
<a href="javascript:;">2</a>
</li>
<li>
<a href="javascript:;">3</a>
</li>
<li>
<a href="javascript:;">4</a>
</li>
<li>
<a href="javascript:;">5</a>
</li>
</ul>
<span></span>
<p>选择解释</p>
</div>
</body>
<script>
function Star() {
this.msg = [
"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
"不满意|部分有破损，与卖家描述的不符，不满意",
"一般|质量一般，没有卖家描述的那么好",
"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
];
// 1 获取标签
this.ulObj = document.querySelector('ul');
this.lisObj = this.ulObj.children;
this.spanObj = this.ulObj.nextElementSibling;
this.pObj = this.spanObj.nextElementSibling;
// 获取ul距离左侧的left值,给p作为基础位置
this.ulLeft = this.ulObj.offsetLeft;
// 获取li的宽度
this.liW = this.lisObj[0].offsetWidth;
// 保存点击的分数
this.setScore = 4;
this.bindEvent();
}
// 将方法写到原型对象上
Star.prototype.bindEvent = function () {
Array.from(this.lisObj).forEach((li, index) => {
// console.log(this);
li.onmouseover = this.overFn.bind(this, index);
// 鼠标移出
li.onmouseout = this.outFn.bind(this);
// 鼠标点击事件
li.onclick = this.clickFn.bind(this, index);
});
}
// 鼠标移出方法
Star.prototype.outFn = function () {
//console.log(this, 111);
this.pObj.style.display = 'none';
this.showStar(this.setScore);
}
// 鼠标移入方法
Star.prototype.overFn = function (index) {
console.log(this);
// 2-1 显示p标签
this.pObj.style.display = 'block';
// 2-2 获取解释语,显示到p
this.pObj.innerHTML = this.showMsg(index, 'em')
// 2-3 设置p的坐标
this.pObj.style.left = this.ulLeft + this.liW * index + 'px';
this.showStar(index)
}
// 点击的方法
Star.prototype.clickFn = function (index) {
// 保存点击的分数
this.setScore = index;
this.showStar(this.setScore);
this.spanObj.innerHTML = this.showMsg(index);
}
// 标签对象和标签字符串不要混用,特别是互相嵌套的时候
Star.prototype.showMsg = function (index, need) {
let tmpMsg = this.msg[index].split('|');
// 创建em
if (need) {
return `<em><strong>${
tmpMsg[0]}</strong></em>${
tmpMsg[1]}`;
}
return `<strong>${
tmpMsg[0]}</strong> ${
tmpMsg[1]}`;
}
// 设置高亮星星的显示
Star.prototype.showStar = function (index) {
// console.log(index);
Array.from(this.lisObj).forEach((v, k) => {
// 让当前操作的星星之前的星星都显示,索引小于index的都显示
v.className = (k <= index) && 'on'
})
}
new Star;
</script>
</html>
Scoring stars sliding===
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title></title>
<style>
*{
margin:0;padding: 0;}
.star{
margin: 0;padding: 0;list-style: none;}
.star li{
float: left;width: 27px;height: 27px;background: url(../图片/小星星.png) no-repeat;}
</style>
</head>
<body>
<ul class="star">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
function Start(){
this.astar = document.querySelectorAll(".star li");
this.startmove()
}
Start.prototype.startmove = function(){
that = this;
for(var i=0;i<this.astar.length;i++){
this.astar[i].index = i;
this.astar[i].onmouseover = function(){
that.startind(this)
}
}
}
Start.prototype.startind = function(that){
console.log(this)
for(var j=0;j<=that.index;j++){
this.astar[j].style.backgroundPositionY = -27 + "px";
}
for(var j=that.index+1;j<this.astar.length;j++){
this.astar[j].style.backgroundPositionY = 0 + "px";
}
}
new Start;
</script>
</html>
