This morning I took the time to write a star rating effect, to share with you. Because of the limited level, please point out if you have any questions.
First to prepare a picture of the stars, Gray is the default state, yellow is the selection state. As shown in figure:
finally attach code：
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>javascript star rating </title>
<style type= "Text/css" >
*{margin:0;padding:0;}
. wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
A{float:left;width:26px;height:20px;background:url (star.png) 0-20px no-repeat;}
P{font:24px Simsun;width:130px;margin-left:auto;margin-right:auto;}
</style>
<body>
<div class= "wrapper" >
<a href= "javascript:;" ></a>
<a href= "javascript:;" ></a>
<a href= "javascript:;" ></a>
<a href= "javascript:;" ></a>
<a href= "javascript:;" ></a>
</div>
<p></p>
</body>
<script type= "Text/javascript" >
Window.onload = function () {
var star = document.getElementsByTagName (' a ');
var odiv = document.getelementsbytagname (' div ') [0];
var temp = 0;
for (var i = 0, len = star.length i < len; i++) {
Star[i].index = i;
Star[i].onmouseover = function () {
Clear ();
for (var j = 0; J < This.index + 1; j + +) {
star[j].style.backgroundposition = ' 0 0 ';
}
}
Star[i].onmouseout = function () {
for (var j = 0; J < This.index + 1; j + +) {
star[j].style.backgroundposition = ' 0-20px ';
}
Current (temp);
}
Star[i].onclick = function () {
temp = This.index + 1;
document.getElementsByTagName (' P ') [0].innerhtml = temp + ' star ';
Current (temp);
}
}
Clear All
function Clear () {
for (var i = 0, len = star.length i < len; i++) {
star[i].style.backgroundposition = ' 0-20px ';
}
}
Show the current number of stars
function current (temp) {
for (var i = 0; i < temp; i++) {
star[i].style.backgroundposition = ' 0 0 ';
}
}
};
</script>
Attached download Address
PS: This is my idle boring, through their own knowledge of JavaScript, random write some effects.
