css文字换行

最新推荐文章于 2023-03-15 16:23:07 发布

shuang1226

最新推荐文章于 2023-03-15 16:23:07 发布

阅读量77

点赞数

文章标签： CSS PHP BBS XHTML

本文链接：https://blog.csdn.net/shuang1226/article/details/83816364

版权

<!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&nothumb=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&nothumb=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&nothumb=yes) left top repeat-x}
.defaultStars{ height:30px; background:url(http://bbs.blueidea.com/attachment.php?aid=103867&k=d72064f5bf2bd854a2ad94add3b9749a&t=1225520759&noupdate=yes&nothumb=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&nothumb=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打包

shuang1226

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css文字换行

yangedie 原创#starRate{position: relative; height:30px; width:150px;background:url(http://bbs.blueidea.com/attachment.php?aid=103866&k=1e7383daa69a1095599cf70517321e97&t=1225520759&noupdat...
复制链接

扫一扫