zoukankan      html  css  js  c++  java
  • jQuery网页换肤 Mr

       网页的换肤的原理很简单,可以通过js对dom的操作动态的更换div的样式实现更换肤色的效果,甚至将整个页面的布局焕然一新,这里只队针对做简单的实例,更多的功能,可以按照模式去扩展,jquery的使用是非常简单和灵活的,当然深入的jquery插件的编写需要对性能的考虑当然需要我们对于编程思想的把握,这里只用jquery在前端页面的用户体验上做简单的扩展:
    本文章为原创文章,转载请注明出处:http://www.cnblogs.com/rafx/
    准备工作:
    images(用于存放必要的图片)
    css文件夹(用于存放必要的css)
    jquery1.3.1.js库可以从jquery的官方网站获得:http://jquery.com/
    HTML structure:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile"/>
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    <script type="text/javascript">

    $(document).ready(
    function(){ //等文档加载完毕执行脚本

    var $li=$("#skin li");
    $li.click(
    function(){
    $(
    "#"+this.id).addClass("selected")//当前的<li>元素被选中
    .siblings().removeClass("selected");//去掉其他同辈元素<li>元素的选中
    alert('nihao');
    $(
    "#cssfile").attr("href","css/"+this.id+".css");//设置不同皮肤
    $.cookie("MyCssSkin",this.id,{path:'/',expires:10});//计入cookie

    })

    });


    </script>
    </head>
    <body>
    <ul id="skin">
    <li id="skin_0" title="轻度近视" class="selected">轻度近视</li>
    <li id="skin_1" title="中度近视">中度近视</li>
    <li id="skin_2" title="严重近视">严重近视</li>
    </ul>
    <div id="div_side_0">
    <div id="news">
    <h1 class="title">时事新闻</h1>
    </div>
    </div>
    </body>
    </html>
     CSS code:
     skin_0.css
    .left{
    float
    :left;
    }
    body
    {
    width
    :1024px;

    }
    ul li
    {
    width
    :70px;
    height
    :20px;
    float
    :left;
    }
    #skin
    {
    width
    :1024px;
    }
    #skin_0
    {
    background-color
    :blue;
    }
    #skin_1
    {
    background-color
    :red;
    }
    #skin_2
    {
    background-color
    :green;
    }
    #div_side_0
    {
    width
    :1024px;
    float
    :left;
    background-image
    : url(../images/rf_bg.jpg);
    font-size
    :13px;
    font-color
    :blue;

    }

    .selected
    {
    width
    :200px;
    }
     skin_1.css
    .left{
    float
    :left;
    }
    body
    {
    width
    :1024px;

    }
    ul li
    {
    width
    :70px;
    height
    :20px;
    float
    :left;
    }
    #skin
    {
    width
    :1024px;
    }
    #skin_0
    {
    background-color
    :green;
    }
    #skin_1
    {
    background-color
    :blue;
    }
    #skin_2
    {
    background-color
    :red;
    }
    #div_side_0
    {
    width
    :1024px;
    float
    :left;
    background-image
    :url(../images/rf_background.jpg);
    font-size
    :23px;
    font-color
    :red;

    }

    .selected
    {
    width
    :200px;
    }
     skin_2.css
    .left{
    float
    :left;
    }
    body
    {
    width
    :1024px;

    }
    ul li
    {
    width
    :70px;
    height
    :20px;
    float
    :left;
    }
    #skin
    {
    width
    :1024px;
    }
    #skin_0
    {
    background-color
    :green;
    }
    #skin_1
    {
    background-color
    :blue;
    }
    #skin_2
    {
    background-color
    :red;
    }
    #div_side_0
    {
    width
    :1024px;
    float
    :left;
    background-image
    :url(../images/rf_background1.jpg);
    font-size
    :33px;
    font-color
    :green;

    }

    .selected
    {
    width
    :200px;
    }
     
    这里只针对jquery的dom操作选择性的写了几个样式,用户可以按照自己的需求对换肤效果进行美化。
     
    以上只是一个模板的换肤效果,仅供参考!
    qq:313247313
    Email:rafx.z@hotmail.com

    新浪微博:Mr-sniper
    Mr-sniper
    北京市海淀区
    邮箱:rafx_z@hotmail.com
  • 相关阅读:
    Begin Example with Override Encoded SOAP XML Serialization
    State Machine Terminology
    How to: Specify an Alternate Element Name for an XML Stream
    How to: Publish Metadata for a WCF Service.(What is the Metadata Exchange Endpoint purpose.)
    Beginning Guide With Controlling XML Serialization Using Attributes(XmlSerializaiton of Array)
    Workflow 4.0 Hosting Extensions
    What can we do in the CacheMetaData Method of Activity
    How and Why to use the System.servicemodel.MessageParameterAttribute in WCF
    How to: Begin Sample with Serialization and Deserialization an Object
    A Test WCF Service without anything of config.
  • 原文地址:https://www.cnblogs.com/rafx/p/jqueryChangebackground.html
Copyright © 2011-2022 走看看