<!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" />
<标题>yangedie 原创</标题>
<style type="text/css">
#starRate{position: relative; height:30px; width:150px;background:url(http://bbs.blueidea.com/attachment.php?aid=103866&k=1e7383daa69a1095599cf70517321e97&t=1225520759&noupdate=yes¬humb=yes);overflow:hidden; cursor:pointer}
#defaultStars{ width:100%; height:100%; background:url(http://bbs.blueidea.com/attachment.php?aid=103866&k=1e7383daa69a1095599cf70517321e97&t=1225520759&noupdate=yes¬humb=yes) no-repeat}
#starRate ul{list-style:none; margin:0; padding:0;position:absolute;top:0; left:0;}
#starRate li{height:30px; width:30px; float:left; text-indent:-100px; overflow:hidden}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
window.onload = function(){
//box 为整个结构的最外层容器，由他来捕捉所有事件
var box = $("starRate");
//默认级别,星星的变化都是经过这个层的背景图片的backgroundPosition 变化来实现
var defaultStars = $("defaultStars");
//获得设置的默认级别
var defaultValue = box.getAttribute("default");
var defaultPosition = defaultValue*30 - 150 + "px -30px";
defaultStars.style.backgroundPosition = defaultPosition;
box.onmouseover = function(e){
var src = e?e.target:event.srcElement;
if (src.tagName == "LI"){
var x = -150 + src.innerHTML*30;
defaultStars.style.backgroundPosition = x + "px -30px";
}
}
box.onmouseout = function(e){
defaultStars.style.backgroundPosition = defaultPosition;
}
box.onclick = function(e){
var src = e?e.target:event.srcElement;
if (src.tagName == "LI"){
var x = -150 + src.innerHTML*30;
defaultStars.style.backgroundPosition = x + "px -60px";
//移除事件，让box不在对鼠标动作作出反映
box.onmouseover = box.onmouseout = box.onclick = null;
box.style.cursor = "default";
$("message").innerHTML = "你投下的一票是：" +src.标题 + "，值是：" + src.innerHTML;
}
}
}
</script>
</head>
<body>
<p id="message">请投下你的一票</p>
<div id="starRate" default="3">
<div id="defaultStars"></div>
<ul>
<li 标题="很差">1</li>
<li 标题="不好">2</li>
<li 标题="一般">3</li>
<li 标题="还可以">4</li>
<li 标题="很好">5</li>
</ul>
</div>
</body>
</html>
提示：您可以先更改部分源代码再运行
外层容器（#starRate），背景色为未投票的灰色星星
这个CASE最主要一点根本就是设置一个默认级别的层（#defaultStars），
然后把ul绝对定位在#defaultStars上面， 拷贝内容到剪贴板
源代码:
#defaultStars{ width:100%; height:100%; background:url(starRate.gif) no-repeat}
#starRate ul{list-style:none; margin:0; padding:0;position:absolute;top:0; left:0;}鼠标onmouseover、onmouseout、onclick的事件触发#defaultStars背景图片的backgroundPosition 变化，
背景图片级别移动实现星星数量的变化，垂直移动实现点击后的样式变化
===============================================================
做完了并非很满意，不能自定义星星的数量，于是干脆做了个函数
把星星的数量、默认级别作为参数，而且可以多个地方使用，源代码也更少了
<!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" />
<标题>yangedie 原创</标题>
<style type="text/css">
.starBox{position: relative;padding:0;height:30px;background:url(http://bbs.blueidea.com/attachment.php?aid=103867&k=d72064f5bf2bd854a2ad94add3b9749a&t=1225520759&noupdate=yes¬humb=yes) left top repeat-x}
.defaultStars{ height:30px; background:url(http://bbs.blueidea.com/attachment.php?aid=103867&k=d72064f5bf2bd854a2ad94add3b9749a&t=1225520759&noupdate=yes¬humb=yes) left -60px repeat-x; }
.starBox a{
position:absolute; left:0; top:0;
height:30px;text-indent:-1000px; overflow:hidden;
background:url(http://bbs.blueidea.com/attachment.php?aid=103867&k=d72064f5bf2bd854a2ad94add3b9749a&t=1225520759&noupdate=yes¬humb=yes) left 100px repeat-x;
outline:none;hide-focus:exPageRankession(this.hideFocus=true);
}
.starBox a:hover{ background-position:left -30px}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
window.onload = function(){
//参数1，字符串，为想要显示星星打分的外层容器id，不需要什么样式规范等
//参数2，字符串数组，为星星鼠标放上去的提示文本(标题)，数组的长度也根本就是星星的数量
//参数3，整数，默认级别，其实那里稍微改动一下，就可以变成显示已打分的平均分
rate("test1",["很差","不好","一般","还可以","很好"],2);
rate("test2",["1级","2级","3级","4级","5级","6级","7级","8级","9级"],5);
}
function rate(divID,标题s,defaultValue){
var size = 标题s.length;
var rateHTML = "<div class='starBox' style='width:" + 30*size + "px'>";
//默认级别层defaultStars，宽度为设置的级别 × 1个星星的宽度
rateHTML += "<div class='defaultStars' style='width:" + 30*defaultValue + "px'></div>";
for (var i=1;i<=size;i++){
var index = size-i; //z-index，递减
rateHTML += "<a href='javascript:void(0)' style='width:" + 30*i + "px;z-index:" + index +"' 标题='" + 标题s[i-1] + "'>" + i + "</a>";
}
rateHTML += "</div>";
$(divID).innerHTML = rateHTML;
//星星点击事件
$(divID).onclick = function(e){
var src = e?e.target:event.srcElement;
if (src.tagName == "A"){
//移除默认级别的层，只是绝对点击之后不需要他了，也不好看
src.parentNode.firstChild.style.display="none";
src.style.backgroundPosition = "left -30px";
//创建一个空的层，覆盖所有星星，让她们不在对鼠标做出反映
var mask = document.createElement("div");
mask.style.cssText = "width:100%;height:100%;position:absolute; left:0; top:0;z-index:99";
src.parentNode.appendChild(mask);
alert("你投票的值是：" + src.innerHTML);
}
}
}
</script>
</head>
<body>
<p>请投下你的一票</p>
<div id="test1"></div>
<p>请投下你的一票</p>
<div id="test2"></div>
</body>
</html>
提示：您可以先更改部分源代码再运行
这个CASE同样也是设置一个默认级别的层（#defaultStars），来显示设置的默认星星
不过这个层不再发生任何变化，直到鼠标点击投票后才display="none"
实现星星变化是经过a标题来实现，
那里把所有的a标题（几个级别，就有几个a标题）
都绝对定位left:0; top:0，也根本就是说她们位置重叠了
从级别最低的1 －> 到级别很高，这些a标题的 z-index 从高到低递减，宽度是从小到大 拷贝内容到剪贴板
源代码:
for (var i=1;i<=size;i++){
var index = size-i; //z-index，递减
rateHTML += "<a href='javascript:void(0)' style='width:" + 30*i + "px;z-index:" + index +"' 标题='" + 标题s[i-1] + "'>" + i + "</a>";
}比如说有5个级别
那么5个a 她们分别是
第一个 a －> z-index:5,宽度是1个星星的宽度
第二个 a －> z-index:4,宽度是2个星星的宽度
第三个 a －> z-index:3,宽度是3个星星的宽度
............
由于这些 a 标题的z-index 和 width 不相同，所以都可以各自反映hover，不互相干扰
咔咔，根本就是这个地方最让我满意，彻底颠覆了我以前在蓝色看到的CASE
都要很多什么 one_star、two_stars、three_stars，
one_star:hover、two_stars:hover、three_stars:hover等样式
CASE打包
分享到：
相关推荐
css控制字母、数字文字自动换行方法css控制文字自动换行css控制文字自动换行
CSS自动换行兼容ie6 ie7+ ff
主要为大家介绍了CSS强制换行对齐的实现方法,涉及css中text-justify属性的使用技巧,需要的朋友可以参考下
关于换行、裁剪的一些CSS属性 word-wrap: normal | break-word normal 正常换行，内容可以撑破容器，例如长单词或者长数字的情况break-word 以单词作为换行依据，如果需要，单词内部允许断行 word-break: normal | ...
主要介绍了CSS自动换行、强制不换行、强制断行、超出显示省略号的相关资料,需要的朋友可以参考下
主要介绍了css是如何实现在页面文字不换行、自动换行、强制换行的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
自动换行五种策略，兼容IE Chrome Firefox
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html <div id=wrap>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css #...
/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ；需与overflow:hidden;一起使用。*/ } ...
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: ”wrap”>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当...
下面小编就为大家带来一篇css控制文字自动换行的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css实现强制不换行/自动换行/强制换行
CSS配置使表格能自动换行 给table加上style 三种参数不同形式
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html <div id=wrap>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css #...
对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html< id>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义<...
多种情况CSS文字超出宽度---换行总结 代码示例效果，下载就可以直接使用的代码哦 下面这个链接是效果图 https://img-blog.csdnimg.cn/af5f7fa301f645399cebe2ce29cdaf94.png?x-oss-process=image/watermark,type_...