jQuery控制网页字体大小和肤色

时间：2023-02-22 10:09:17

在一些网站上经常看到有控制网页肤色和字体大小的功能，接下来，我们将用两个例子来实现这两个功能。

网页字体大小

首先我们在网页中添加一些被控制大小的文字和字体控制的按钮。

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

</head>

<body>

<div class="msg">

    <div class="msg_caption">

        <span class="bigger" >放大</span>

        <span class="smaller" >缩小</span>

        <span >20</span>

        <span >18</span>

        <span >16</span>

    </div>

    <div>

        <p id="para">

        This is some text. This is some text. This is some text. This is some text. This

        is some text. This is some text. This is some text. This is some text. This is some

        text. This is some text. This is some text. This is some text. This is some text.

        This is some text. This is some text. This is some text. This is some text. This

        is some text. This is some text.

        </p>

    </div>

</div>

</body>

</html>

jQuery控制网页字体大小和肤色

有两种控制字体大小的方式：在当前字体大小的基础上放大或缩小，直接选择字号进行控制。

首先是第一种，需要获取当前文字的字体大小，获取的值是带单位的数值，我们在进行放大缩小操作时，需要进行加减运算，所以需要用parseInt()方法去掉单位再进行运算，运算后的值需要加上单位后再赋值给需要控制的文字，但是需要注意的是，无限放大和缩小并不合适，所以在操作时，需要给一个最大和最小字体。

第二种方式就比较简单了，直接通过点击获取字体大小的数值，然后加上单位就可以进行赋值添加样式了。

<script type="text/javascript">

    $(function(){

        $("span").click(function(){

            var thisEle = $("#para").css("font-size");

            var textFontSize = parseFloat(thisEle , 10);

            var unit = thisEle.slice(-2); //获取单位

            var cName = $(this).attr("class");

            if(cName == "bigger"){

                   if( textFontSize <= 22 ){

                        textFontSize += 2;

                    }

            }else if(cName == "smaller"){

                   if( textFontSize >= 12  ){

                        textFontSize -= 2;

                    }

            }else{

                textFontSize = $(this).text();

            }

            $("#para").css("font-size",  textFontSize + unit);

        });

    });

  </script>

2，网页换肤

网页换肤的原理是通过调用不同的样式表文件来实现不同皮肤的切换，并且需要将换好的皮肤记入Cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。

首先设置HTML结构：

<!DOCTYPE>

<html>

<head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="css/default.css" rel="stylesheet" type="text/css" />

    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></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>

        <li id="skin_3" title="天蓝色">天蓝色</li>

        <li id="skin_4" title="橙色">橙色</li>

        <li id="skin_5" title="淡绿色">淡绿色</li>

    </ul>

    <div id="div_side_0">

        <div id="news">

            <h1 class="title">时事新闻</h1>

        </div>

    </div>

    <div id="div_side_1">

        <div id="game">

            <h1 class="title">娱乐新闻</h1>

        </div>

    </div>

</body>

</html>

其中基础样式为：

*{

    margin:0px;

    padding:0px;

}

body {

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 12px;

}

#div_side_0,#div_side_1

{

    float:left;

    width:120px;

    height:450px;

    }

#skin

{

    margin:10px;

    padding:5px;

    width:210px;

    padding-right:0px;

    list-style:none;

    border: 1px solid #CCCCCC;

    overflow:hidden;

    }

#skin li{

    float:left;

    margin-right:5px;

    width:15px;

    height:15px;

    text-indent:-999px;

    overflow:hidden;

    display:block;

    cursor:pointer;

    background-image:url(theme.gif);

}

#skin_0{

    background-position:0px 0px;

}

#skin_1{

    background-position:15px 0px;

}

#skin_2{

    background-position:35px 0px;

}

#skin_3{

    background-position:55px 0px;

}

#skin_4{

    background-position:75px 0px;

}

#skin_5{

    background-position:95px 0px;

}

#skin_0.selected{

    background-position:0px 15px !important;

}

#skin_1.selected{

    background-position:15px 15px !important;

}

#skin_2.selected{

    background-position:35px 15px !important;

}

#skin_3.selected{

    background-position:55px 15px !important;

}

#skin_4.selected{

    background-position:75px 15px !important;

}

#skin_5.selected{

    background-position:95px 15px !important;

}

.title

{

    cursor:pointer;}

h1{

   margin:10px;

   padding:10px 20px;

   width:60px;

   color:#ffffff;

   font-size:14px;

}

a:link {

    text-decoration: none;

    color: #333333;

}

a:visited {

    color: #333333;

    text-decoration: none;

}

a:hover {

    color: #000000;

    text-decoration: underline;

}

然后根据HTML代码预定义几套换肤用的样式，分别有灰色、紫色、红色等，在本次的实例中为了简化，只是进行简单的背景替换，所以在这些样式文件中只有对于的背景颜色：

/*skin_0.css*/
h1{
　　background:#999999;
}

在初始化的时候，默认选择灰色，后期将通过更改样式表链接来更换颜色，所以，我们需要为添加背景色的样式表链接添加一个id，方便后期修改。

 <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />

网页的初始化效果如下：
jQuery控制网页字体大小和肤色

接下来，将通过点击皮肤选择按钮来实现换肤。

首先，选中颜色后，为当前点击的元素添加选中样式。

var $li =$("#skin li");

$li.click(function(){

      $("#"+this.id).addClass("selected")

              .siblings().removeClass("selected");

})

其次，设置网页的皮肤颜色。

$(function(){

    var $li =$("#skin li");

    $li.click(function(){

          $("#"+this.id).addClass("selected")

                 .siblings().removeClass("selected");

          $("#cssfile").attr("href","css/"+this.id+".css");

    })

})

此时，简易版的换肤就实现了，但是，当用户刷新网页或者关闭浏览器后，皮肤又会被初始化，因此，我们需要将当前选择的皮肤进行保存。

这里，我们需要进入jQuery的cookie插件

jQuery.cookie = function(name, value, options) {

    if (typeof value != 'undefined') { // name and value given, set cookie

        options = options || {};

        if (value === null) {

            value = '';

            options.expires = -1;

        }

        var expires = '';

        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {

            var date;

            if (typeof options.expires == 'number') {

                date = new Date();

                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));

            } else {

                date = options.expires;

            }

            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE

        }

        // CAUTION: Needed to parenthesize options.path and options.domain

        // in the following expressions, otherwise they evaluate to undefined

        // in the packed version for some reason...

        var path = options.path ? '; path=' + (options.path) : '';

        var domain = options.domain ? '; domain=' + (options.domain) : '';

        var secure = options.secure ? '; secure' : '';

        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');

    } else { // only name given, get cookie

        var cookieValue = null;

        if (document.cookie && document.cookie != '') {

            var cookies = document.cookie.split(';');

            for (var i = 0; i < cookies.length; i++) {

                var cookie = jQuery.trim(cookies[i]);

                // Does this cookie string begin with the name we want?

                if (cookie.substring(0, name.length + 1) == (name + '=')) {

                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

                    break;

                }

            }

        }

        return cookieValue;

    }

};

然后将当前的皮肤保存进cookie，保存后，就可以通过cookie来获取当前的皮肤了，如果cookie存在，则将当前皮肤设置为cookie记录的值，这样，当用户刷新网页后，仍然是当前选择的皮肤。

完整代码如下：

<!DOCTYPE>

<html>

<head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="css/default.css" rel="stylesheet" type="text/css" />

    <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />

    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script src="js/jquery.cookie.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function(){

            var $li =$("#skin li");

            $li.click(function(){

                $("#"+this.id).addClass("selected")

                            .siblings().removeClass("selected");

                $("#cssfile").attr("href","css/"+ (this.id) +".css"); //设置不同肤色

                $.cookie( "MyCssSkin" ,  this.id , { path: '/', expires: 10 });//存入cookie

            });

            var cookie_skin = $.cookie( "MyCssSkin");  //获取cookie

            if (cookie_skin) {

                //如果存在cookie

                    $("#"+cookie_skin).addClass("selected")

                                      .siblings().removeClass("selected");

                    $("#cssfile").attr("href","css/"+ cookie_skin +".css");

                    $.cookie( "MyCssSkin" ,  cookie_skin  , { path: '/', expires: 10 });

            }

        })

    </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>

        <li id="skin_3" title="天蓝色">天蓝色</li>

        <li id="skin_4" title="橙色">橙色</li>

        <li id="skin_5" title="淡绿色">淡绿色</li>

    </ul>

    <div id="div_side_0">

        <div id="news">

            <h1 class="title">时事新闻</h1>

        </div>

    </div>

    <div id="div_side_1">

        <div id="game">

            <h1 class="title">娱乐新闻</h1>

        </div>

    </div>

</body>

</html>

jQuery控制网页字体大小和肤色的更多相关文章

  1. jQuery——修改网页字体大小

    HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...

  2. Type&period;js – 帮助你更好的控制网页字体排版

    Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就 ...

  3. javascript控制rem字体大小

    摘要:在写响应式H5页面的时候,我常常会用rem字体,为了兼容多个分辨率的设备,需要写多个@media标签,太麻烦并且不够精致,尤其是移动端的页面往往达不到我想要的效果,后来就用js替代了css的@m ...

  4. &lbrack;转&rsqb;响应式网页设计&colon;rem、em设置网页字体大小自适应

    本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...

  5. JavaScript在智能手机上的应用-通过滑动修改网页字体大小

    ---------------------------------- <script type="text/javascript">            //变量x, ...

  6. 响应式网页：用em&comma;rem设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  7. 响应式网页设计&colon;rem、em设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  8. rem设置网页字体大小

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  9. h5 禁止微信内置浏览器调整字体大小方法

    ios 通过重写样式控制 body { -webkit-text-size-adjust:100%!important; } android 通过重写事件控制 (function() { if (ty ...

随机推荐

  1. lua中实现异步资源读写

    同样还是更新方面的需求,当我们检测到版本是新安装的以后,要进行upd目录清除.如果使用os.execute执行 rm -rf ooxx 是非常快的但由于os.execute一旦报错,那整个lua进程就 ...

  2. TCP长连接与短连接

    1.概念区别 所谓TCP短连接,是指通信双方有数据交互时,就建立一个TCP连接,数据发送完成后,则断开此TCP连接.也就是说TCP连接维持的时间比较短.一般银行网页数据交互都使用短连接.再比如说htt ...

  3. &lbrack;Angular 2&rsqb; Async Http

    Async Pipe: The Asynce pipe receive a Promise or Observable as  input and subscribes to the input, e ...

  4. netty 对 protobuf 协议的解码与包装探究&lpar;2&rpar;

    netty 默认支持protobuf 的封装与解码,如果通信双方都使用netty则没有什么障碍,但如果客户端是其它语言(C#)则需要自己仿写与netty一致的方式(解码+封装),提前是必须很了解net ...

  5. Docker4Windows -- 从外部（非本机host）访问 由docker container运行的程序

    背景 当我们在windows 上面运行docker container的时候,我们需要借助于模拟器(例如,Virtual box/Hyper V),她的目的主要是在我们的windows系统上面模拟出一 ...

  6. Python-快速排序

    算法思想:快速排序运用了分而治之的思想,即在所选数组中选择一个基准(任选一个都可以),以改基准为基础,将小于该基准的元素都移动基准的左边,大于该基准的数据都移动到右边,然后对左右两边进行递归处理.同样 ...

  7. Football 概率DP poj3071

                                                                                                 Footbal ...

  8. CUDA与OpenGL互操作

    当处理较大数据量的时候,往往会用GPU进行运算,比如OpenGL或者CUDA.在实际的操作中,往往CUDA实现并行计算会比OpenGL更加方便,而OpenGL在进行后期渲染更具有优势.由于CUDA中的 ...

  9. TensorFlow函数：tf&period;random&lowbar;shuffle

    tf.random_shuffle 函数 random_shuffle( value, seed=None, name=None ) 定义在:tensorflow/python/ops/random_ ...

  10. Java学习笔记43（Spring的jdbc模板）

    在之前的学习中,我们执行sql语句,需要频繁的开流,关流比较麻烦,为了更加的简化代码,我们使用Spring 的jdbc模板jdbcTemplate来简化我们的代码量:需要导入的包有: 我们在之前的dr ...

相关文章