自己写的CSS皮肤动态更换代码

五岳之巅 发表于 2011-12-21 08:44

先看图吧，这就是最终效果：<div>在默认状态下，或点击红色按钮后：</div><div><a href="http://blog.chinaunix.nethttp://blog.chinaunix.net/attachment/201106/20/22414998_1308584749YAX1.png" target="_blank"><img src="http://blog.chinaunix.nethttp://blog.chinaunix.net/attachment/201106/20/22414998_1308584749YAX1.png" .load="imgResize(this, 650);" border="0" ;=""></a></div><div> </div><div>在点击绿色按钮后：</div><div><a href="http://blog.chinaunix.nethttp://blog.chinaunix.net/attachment/201106/20/22414998_13085847503rGY.png" target="_blank"><img src="http://blog.chinaunix.nethttp://blog.chinaunix.net/attachment/201106/20/22414998_13085847503rGY.png" .load="imgResize(this, 650);" border="0" ;=""></a></div><div> </div><div>在点击蓝色按钮后：</div><div><a href="http://blog.chinaunix.nethttp://blog.chinaunix.net/attachment/201106/20/22414998_1308584752RRLo.png" target="_blank"><img src="http://blog.chinaunix.nethttp://blog.chinaunix.net/attachment/201106/20/22414998_1308584752RRLo.png" .load="imgResize(this, 650);" border="0" ;=""></a></div><div> </div><div>在点击黄色按钮后：</div><div><a href="http://blog.chinaunix.nethttp://blog.chinaunix.net/attachment/201106/20/22414998_13085847488VWa.png" target="_blank"><img src="http://blog.chinaunix.nethttp://blog.chinaunix.net/attachment/201106/20/22414998_13085847488VWa.png" .load="imgResize(this, 650);" border="0" ;=""></a></div><div> </div><div>看了最终效果后，给大家介绍一下皮肤文件的构成情况：</div><div>yuan.html</div><div>images3/</div><div>     left-bottom.gif</div><div>     left-top.gif</div><div>     right.gif</div><div>     right-bottom.gif</div><div>     right-top.gif</div><div>     images3.css</div><div><div>images-light/</div><div>     left-bottom.gif</div><div>     left-top.gif</div><div>     right.gif</div><div>     right-bottom.gif</div><div>     right-top.gif</div><div>     images3.css</div></div><div><div>images-dark/</div><div>     left-bottom.gif</div><div>     left-top.gif</div><div>     right.gif</div><div>     right-bottom.gif</div><div>     right-top.gif</div><div>     images3.css</div></div><div><div>images-notebook/</div><div>     left-bottom.gif</div><div>     left-top.gif</div><div>     right.gif</div><div>     right-bottom.gif</div><div>     right-top.gif</div><div>     images3.css</div></div><div>可以发现除了目录不同，文件名都是一样的。当然不同目录下的文件名虽然一样，但images3.css都一样，而图片都不一样，是不同样式的图片啦。现在让大家看一下images3.css的内容：</div><div><div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>body{ </li><li>
    background:#ffff99; </li><li>
    font:12px/1.5 Arial; </li><li>
} </li><li>
 </li><li>
.rounded h2{ </li><li>
    margin:0; </li><li>
    padding:20px 20px 10px 20px; </li><li>
} </li><li>
 </li><li>
.rounded .main{ </li><li>
    padding:10px 20px 10px 20px; </li><li>
    margin:-2em 0 0 0; </li><li>
} </li><li>
 </li><li>
.rounded .footer{ </li><li>
} </li><li>
 </li><li>
.rounded .footer p{ </li><li>
    padding:10px 20px 20px 20px; </li><li>
    margin:-2em 0 0 0; </li><li>
} </li><li>
 </li><li>
.rounded{ </li><li>
    background:url(./left-top.gif) top left no-repeat; </li><li>
} </li><li>
 </li><li>
.rounded h2{ </li><li>
    background:url(./right-top.gif) top right no-repeat; </li><li>
} </li><li>
 </li><li>
.rounded .main{ </li><li>
    background:url(./right.gif) top right repeat-y; </li><li>
} </li><li>
 </li><li>
.rounded .footer{ </li><li>
    background:url(./left-bottom.gif) bottom left no-repeat; </li><li>
} </li><li>
 </li><li>
.rounded .footer p{ </li><li>
    background:url(./right-bottom.gif) bottom right no-repeat; </li><li>
} </li><li>
 </li><li>
#header,#in,#pagefooter{ </li><li>
    margin:0 auto; </li><li>
} </li><li>
 </li><li>
#header.rounded, #in{ </li><li>
    width:820px; </li><li>
} </li><li>
 </li><li>
#container.rounded{ </li><li>
    width:600px; </li><li>
    float:left; </li><li>
} </li><li>
 </li><li>
#side.rounded{ </li><li>
    width:200px; </li><li>
    float:right; </li><li>
} </li><li>
 </li><li>
#pagefooter.rounded{ </li><li>
    clear:both; </li><li>
    width:820px; </li><li>
} </li><li>
 </li><li>
#btn{ </li><li>
    margin:0 0 10px 20px; </li><li>
    display:inline; </li><li>
}</li></ol></div></div><div> </div><div>之所以会换肤，主要是html代码中的四个按钮，执行了javascript代码而已，请大家参看源代码：</div><div><div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li><li>
<html xmlns="http://www.w3.org/1999/xhtml"> </li><li>
<head> </li><li>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </li><li>
    <link href="images3/images3.css" rel="stylesheet" type="text/css" id="changecss" /> </li><li>
     </li><li>
    <script language="javascript"> </li><li>
        function getCss(flag){ </li><li>
            document.getElementById('changecss').href = flag + '/images3.css'; </li><li>
        } </li><li>
         </li><li>
        function change(num){ </li><li>
            var flag = ''; </li><li>
            switch(num){ </li><li>
                case 1:flag = "images3";break; </li><li>
                case 2:flag = "images-light";break; </li><li>
                case 3:flag = "images-dark";break; </li><li>
                case 4:flag = "images-notebook";break; </li><li>
                default:alert("错误的皮肤号，正在返回");return false; </li><li>
            } </li><li>
 </li><li>
            getCss(flag); </li><li>
        } </li><li>
    </script> </li><li>
</head> </li><li>
<body> </li><li>
    <div id="header" class="rounded"> </li><li>
        <h2>Header</h2> </li><li>
        <div class="main"> </li><li>
            <p> </li><li>
                这是一行文本，这里作为样例，显示在圆角框。<br /> </li><li>
                这是一行文本，这里作为样例，显示在圆角框。 </li><li>
            </p> </li><li>
            <p> </li><li>
                这是一行文本，这里作为样例，显示在圆角框。<br /> </li><li>
                这是一行文本，这里作为样例，显示在圆角框。 </li><li>
            </p> </li><li>
        </div> </li><li>
        <div class="footer"> </li><li>
            <p> </li><li>
                这是版权信息文字。 </li><li>
            </p> </li><li>
        </div> </li><li>
    </div> </li><li>
    <div id="in"> </li><li>
        <div id="container" class="rounded"> </li><li>
            <h2>Container</h2> </li><li>
            <div class="main"> </li><li>
                <p> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。<br /> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。 </li><li>
                </p> </li><li>
                <p> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。<br /> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。 </li><li>
                </p> </li><li>
                <p> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。<br /> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。 </li><li>
                </p> </li><li>
                点这里更换网页皮肤： </li><li>
                <form id="btn"> </li><li>
                    <input type="button" style="background:red;" width="20" onclick="change(1);" /> </li><li>
                    <input type="button" style="background:green;" width="20" onclick="change(2);" /> </li><li>
                    <input type="button" style="background:blue;" width="20" onclick="change(3);" /> </li><li>
                    <input type="button" style="background:yellow;" width="20" onclick="change(4);" /> </li><li>
                </form> </li><li>
            </div> </li><li>
            <div class="footer"> </li><li>
                <p> </li><li>
                    这是版权信息文字。 </li><li>
                </p> </li><li>
            </div> </li><li>
        </div> </li><li>
        <div id="side" class="rounded"> </li><li>
            <h2>Side</h2> </li><li>
            <div class="main"> </li><li>
                <p> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。<br /> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。 </li><li>
                </p> </li><li>
                <p> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。<br /> </li><li>
                    这是一行文本，这里作为样例，显示在圆角框。 </li><li>
                </p> </li><li>
            </div> </li><li>
            <div class="footer"> </li><li>
                <p> </li><li>
                    这是版权信息文字。 </li><li>
                </p> </li><li>
            </div> </li><li>
        </div> </li><li>
    </div> </li><li>
    <div id="pagefooter" class="rounded"> </li><li>
        <h2>Pagefooter</h2> </li><li>
        <div class="main"> </li><li>
            <p> </li><li>
                这是一行文本，这里作为样例，显示在圆角框。<br /> </li><li>
                这是一行文本，这里作为样例，显示在圆角框。 </li><li>
            </p> </li><li>
            <p> </li><li>
                这是一行文本，这里作为样例，显示在圆角框。<br /> </li><li>
                这是一行文本，这里作为样例，显示在圆角框。 </li><li>
            </p> </li><li>
        </div> </li><li>
        <div class="footer"> </li><li>
            <p> </li><li>
                这是版权信息文字。 </li><li>
            </p> </li><li>
        </div> </li><li>
    </div> </li><li>
</body> </li><li>
</html></li></ol></div></div><div>    刚开始还一直有错，整的我很郁闷，后来发现是把getElementById写成了getElementsById，看看一个是ment一个是ments就错误。小心使得万年传啊。</div>

页: [1]

Chinaunix's Archiver

自己写的CSS皮肤动态更换代码