css文字换行

zhengshuangxi1226

浏览: 50227 次
性别:
来自: 上海

最近访客更多访客>>

u011670147

zhangdaiscott

shizhe0612

labmem_000

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS PHP BBS XHTML

<!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打包

组织部评分.rar (1.8 MB)
下载次数: 2

新建文件夹.rar (1.1 MB)
下载次数: 1

star2.rar (23.7 KB)
下载次数: 1

分享到：

js时间控件 | 改变层

2011-01-25 00:30
浏览 1293
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论