admin管理员组文章数量:1564181
效果图:
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
#mark{ margin:200px auto;height:50px; width:300px;/* border:#CCC 1px solid;*/ position:relative;}
#mark ul{ height:100%; width:100%;}
ul li{ list-style:none; height:40px; width:40px; cursor:pointer; margin:0px; display:block; float:left;background:url(images/star.png) no-repeat 0 0;}
p{ padding:8px;height:25px; width:74px; border:#CCC 1px solid; display:none; position:absolute; left:210px; top:0px; line-height:25px; font-size:14px; font-family:"微软雅黑"; text-align:center;}
.active{ background-image:url(images/star.png); background-position:0 -40px;}
span{
display: none;
height: 0;
width: 0;
}
.left{
position: absolute;
border-color: transparent #CCC transparent transparent;
border-style:solid;
border-width:8px;
left:195px;
top:15px;
}
.right{
position: absolute;
border-color: transparent #FFF transparent transparent;
border-style:solid;
border-width:8px;
left: 196px;
top:15px;
}
</style>
<script type="text/javascript">
var optxt=['很差','较差','一般','推荐','力荐']
window.οnlοad=function(){
var oDiv=document.getElementById('mark');
var aLi=oDiv.getElementsByTagName('li');
var oP=oDiv.getElementsByTagName('p')[0];
var ospan=oDiv.getElementsByTagName('span');
var i=0;
for(i=0; i<aLi.length;i++){
aLi[i].index=i;
/*鼠标移入事件*/
aLi[i].οnmοuseοver=function(){
oP.style.display ='block';
ospan[0].style.display ='block';
ospan[1].style.display ='block';
oP.innerHTML=optxt[this.index];
for(i=0;i<=this.index;i++)
{aLi[i].className ='active';}
}
/*鼠标移出事件*/
aLi[i].οnmοuseοut=function(){
oP.style.display ='none';
ospan[0].style.display ='none';
ospan[1].style.display ='none';
for(i=0;i<aLi.length;i++)
{ aLi[i].className ='';}/*鼠标离开的时候将所有li的class置空*/
}
/*鼠标点击事件*/
aLi[i].οnclick= function(){
alert('感谢您的评分!您给这部电影投了'+(this.index+1)+'分!');
}
}
}
</script>
</head>
<body>
<div id="mark">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
<span class="left"></span><span class="right"></span>
</div>
</body>
</html>
今天就到这儿吧,赶紧复习去,马上就要考试了。。。。
本文标签: 迅雷评分电影JavaScript
版权声明:本文标题:javascript实现模仿迅雷电影评分 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727486230a1117186.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论