商场五星好评特效

来源：互联网发布：徐小明撑压划线源码编辑：程序博客网时间：2024/06/10 05:06

css代码

<style>ul.rating {    width: 80px;    height: 16px;    position: relative;    overflow: hidden;    text-indent: -9999em;}ul.rating li {    float: left;  /*  border: 1px solid red;*/}ul.rating li a {    position: absolute;    left: 0;    top: 0;    width: 16px;    height: 16px;    <span style="color:#FF0000;">z-index: 200;</span>}ul.rating li.one a{    left: 0;}ul.rating li.two a{    left: 16px;}ul.rating li.three a{    left: 32px;}ul.rating li.four a{    left: 48px;}ul.rating li.five a{    left: 64px;}ul.rating li a:hover {    <span style="color:#FF0000;">z-index: 2;</span>    <span style="color:#FF0000;">width: 80px;    height: 16px;</span>    <span style="color:#FF0000;">overflow: hidden;</span>    left: 0;    <span style="color:#FF0000;">background: url(../images/star-matrix.gif) no-repeat 0 0;</span>}ul.rating li.one a:hover {    <span style="color:#FF0000;">background: url(../images/star-matrix.gif) no-repeat 0 -96px;</span>}ul.rating li.two a:hover {    background: url(../images/star-matrix.gif) no-repeat 0 -112px;}ul.rating li.three a:hover {    background: url(../images/star-matrix.gif) no-repeat 0 -128px;}ul.rating li.four a:hover {    background: url(../images/star-matrix.gif) no-repeat 0 -144px;}ul.rating li.five a:hover {    background: url(../images/star-matrix.gif) no-repeat 0 -160px;} .nostar {  /*没有星的评价背景图*/background: url(../images/star-matrix.gif) 0 0  no-repeat;}.onestar { /*一颗星的评价背景图*/background: url(../images/star-matrix.gif) 0 -16px  no-repeat;}.twostar { /*二颗星的评价背景图*/background: url(../images/star-matrix.gif) 0 -32px  no-repeat;}.threestar {/*三颗星的评价背景图*/background: url(../images/star-matrix.gif) 0 -48px  no-repeat;}.fourstar { /*四颗星的评价背景图*/background: url(../images/star-matrix.gif) 0 -64px  no-repeat;}.fivestar {/*五颗星的评价背景图*/background: url(../images/star-matrix.gif) 0 -80px  no-repeat;}</style>

js代码

<script>$(function(){$("#productEvaluate ul li>a").click(function(){            var sty=$(this).parent().attr("class");            $(this).parent().parent().removeClass().addClass("clearfix rating "+sty+"star");        });});</script>

html代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>五星好评</title><script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script></head><body>   <div id="productEvaluate">              给商品评分:              <ul class="clearfix rating nostar">                  <li class="one"><a href="javascript:void(0)" title="1分">1</a></li>                  <li class="two"><a href="javascript:void(0)" title="2分">2</a></li>                  <li class="three"><a href="javascript:void(0)" title="3分">3</a></li>                  <li class="four"><a href="javascript:void(0)" title="4分">4</a></li>                  <li class="five"><a href="javascript:void(0)" title="5分">5</a></li>              </ul>          </div></body></html>

0 0