zoukankan      html  css  js  c++  java
  • javascript实现模仿迅雷电影评分

    效果图:




    代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/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; 300px;/* border:#CCC 1px solid;*/ position:relative;}
    #mark ul{ height:100%; 100%;}
    ul li{ list-style:none; height:40px; 40px; cursor:pointer; margin:0px; display:block; float:left;background:url(images/star.png) no-repeat 0 0;}
    p{ padding:8px;height:25px; 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;
    0;
    }
    .left{
    position: absolute;
    border-color: transparent #CCC transparent transparent;
    border-style:solid;
    border-8px;
    left:195px;
    top:15px;
    }
    .right{
    position: absolute;
    border-color: transparent #FFF transparent transparent;
    border-style:solid;
    border-8px;
    left: 196px;
    top:15px;
    }
    </style>
    <script type="text/javascript">
    var optxt=['很差','较差','一般','推荐','力荐']
    window.onload=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].onmouseover=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].onmouseout=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].onclick= 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>

    今天就到这儿吧,赶紧复习去,马上就要考试了。。。。

  • 相关阅读:
    条款1:理解模板类型推导
    非受限联合体
    整型
    vector作为函数返回类型
    SQL Server数据库空间管理 (1)
    1085 PAT单位排行 (25 分
    1084 外观数列 (20 分)
    1083 是否存在相等的差 (20 分)
    1082 射击比赛 (20 分)
    1081 检查密码 (15 分)
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3141225.html
Copyright © 2011-2022 走看看