• 2009-07-01

    可换肤的qq窗口(兼容ie&ff&opera) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/41750960.html

    用div+css写了一个可换肤的qq窗口,代码存档。
    <html>
    <head>
    <style>
    .a{
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    width:110px;
    height:350px;
    text-align:center;
    padding-top:5px;
    padding-bottom:1px;
    }
    .b{
    height:1px;
    overflow:hidden;
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    }
    .a_pink{
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    width:110px;
    height:350px;
    text-align:center;
    padding-top:5px;
    padding-bottom:1px;
    background:pink;
    }
    .b_pink{
    height:1px;
    overflow:hidden;
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    background:pink;
    }
    .a_yellow{
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    width:110px;
    height:350px;
    text-align:center;
    padding-top:5px;
    padding-bottom:1px;
    background:yellow;
    }
    .b_yellow{
    height:1px;
    overflow:hidden;
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    background:yellow;
    }
    .a_lightgreen{
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    width:110px;
    height:350px;
    text-align:center;
    padding-top:5px;
    padding-bottom:1px;
    background:lightgreen;
    }
    .b_lightgreen{
    height:1px;
    overflow:hidden;
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    background:lightgreen;
    }
    .a_orange{
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    width:110px;
    height:350px;
    text-align:center;
    padding-top:5px;
    padding-bottom:1px;
    background:orange;
    }
    .b_orange{
    height:1px;
    overflow:hidden;
    border-left:1px #ADADAD solid;
    border-right:1px #ADADAD solid;
    background:orange;
    }
    li{list-style:none;font-size:13px;margin-bottom:5px;list-style-position:outside}
    .title{height:27px;*height:33px;padding-top:6px;overflow:hidden;cursor:pointer;font-size:16px}

    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
    {
    .title{height:24px;}
    }

    .lastone{padding-top:6px;cursor:default;height:226px;font-size:16px}
    .line{background:#cbcbcb;height:1px;width:100%;overflow:hidden;margin-top:7px;}
    .main{padding-top:5px;background:white;height:100%}
    </style>
    <script>
    function myopen(obj)
    {
    for(i=0;i<document.getElementsByTagName("div").length;i++)
    if(document.getElementsByTagName("div")[i].id.substring(0,3)=="div"&&document.getElementsByTagName("div")[i]!=obj)
    {
    if(document.all)
    document.getElementsByTagName("div")[i].style.height="33px";
    else if(navigator.appName=="Opera")
    document.getElementsByTagName("div")[i].style.height="24px";
    else
    document.getElementsByTagName("div")[i].style.height="27px";
    document.getElementsByTagName("div")[i].style.overflow="hidden";
    if(document.getElementsByTagName("div")[i].className!="lastone")
    document.getElementsByTagName("div")[i].style.borderBottom="1px solid #cbcbcb";

    document.getElementsByTagName("div")[i].style.cursor="pointer";
    document.getElementById("line"+document.getElementsByTagName("div")[i].id.substring(3,document.getElementsByTagName("div")[i].id.length)).style.visibility="hidden";
    }

    obj.style.cursor="default";
    obj.style.height="252px";
    if(obj.className!="lastone")
    obj.style.borderBottom="1px solid #cbcbcb";
    document.getElementById("line"+obj.id.substring(3,obj.id.length)).style.visibility="visible";

    }
    function mystyle(obj)
    {
    for(i=0;i<document.getElementsByTagName("div").length;i++)
    if(document.getElementsByTagName("div")[i].className.substring(0,1)=="a"||document.getElementsByTagName("div")[i].className.substring(0,1)=="b")
    document.getElementsByTagName("div")[i].className=document.getElementsByTagName("div")[i].className.substring(0,1)+obj.value;
    }
    </script>
    </head>
    <body>
    <div style="float:right">
    <div class="b" style="margin-left:3px;width:104px;background:#ADADAD"></div>
    <div class="b" style="margin-left:2px;width:106px;"></div>
    <div class="b" style="margin-left:1px;width:108px"></div>
    <div class="a">
    <div onclick=myopen(this) id=div1 class=title>医院推荐<br><div class=line id=line1></div><div class=main><li>医院推荐</li><li>医院推荐</li><li>医院推荐</li><li>医院推荐</li><li>医院推荐</li><li>医院推荐</li><li>医院推荐</li><li>医院推荐</li><li>医院推荐</li><li>医院推荐</li></div></div>
    <div onclick=myopen(this) id=div2 class=title>专家推荐<br><div class=line id=line2></div><div class=main><li>专家推荐</li><li>专家推荐</li><li>专家推荐意见</li><li>专家推荐</li><li>专家推荐</li><li>专家推荐</li><li>专家推荐</li></div></div>
    <div onclick=myopen(this) id=div3 class=title>项目推荐<br><div class=line id=line3></div><div class=main><li>项目推荐</li><li>项目推荐</li><li>项目推荐</li><li>项目推荐</li></div></div>
    <div onclick=myopen(this) id=div4 class=lastone>地区推荐<br><div class=line id=line4></div><div class=main><li>地区推荐</li><li>地区推荐</li><li>地区推荐</li><li>地区推荐</li><li>地区推荐</li><li>地区推荐</li></div></div>
    </div>
    <div class="b" style="margin-left:1px;width:108px;background:white"></div>
    <div class="b" style="margin-left:2px;width:106px;background:white"></div>
    <div class="b" style="margin-left:3px;width:104px;background:#ADADAD"></div>
    </div>
    <p>
    change style
    <select onchange=mystyle(this)>
    <option value="">default
    <option value="_pink">可爱pink
    <option value="_yellow">亮眼yellow
    <option value="_lightgreen">清新lightgreen
    <option value="_orange">香馨orange
    </select>
    </p>
    </body>
    </html>

    分享到:

    历史上的今天: