js实现文章文字大小字号功能完整实例


Posted in Javascript onNovember 01, 2014

本文实例讲述了js实现文章文字大小字号功能的方法。分享给大家供大家参考。具体分析如下:

文字大中小是很多网站供用户阅读方便的一个功能,本文实例介绍的文字大中小字号功能可以在用户选择之后打开只要在同网站打开另一篇文章都会根据用户习惯来显示字体大小。

大家一定在某些大型网站看到过文章标题下三个按钮 “大”、“中”、“小”,用来照顾不同人的阅读习惯。这里我就要介绍这种方法,而且比它们的还支持自动保存哦~只要选择一次,下次阅读自动调整到喜欢的字号。

JS 代码部分:

首先把下边的 JS 放到 JS 文件或者 script 标签里:

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

    if (typeof value != 'undefined') {

        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();

        }

        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 {

        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]);

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

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

                    break;

                }

            }

        }

        return cookieValue;

    }

};

function SetFont(size){

    $.cookie('Font_size', size, { expires: 99999999 });

    $(".context").css("font-size",size);//.context 换成你文章内容的容器

};

$(document).ready(function(){

    SetFont( $.cookie('Font_size') + 'px' );

});

注意把代码的 .context 换成你的文章内容容器。

Html 代码部分:

然后在需要的地方调用下边的代码:

<a href="javascript:SetFont(16)">大</a>

<a href="javascript:SetFont(14)">中</a>

<a href="javascript:SetFont(12)">小</a>

可以自定义 SetFont() 函数里的字号以及文字。

希望本文所述对大家基于javascript的web程序设计有所帮助。

Javascript 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
js实现文字截断功能
Sep 14 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
js中confirm实现执行操作前弹出确认框的方法
Nov 01 #Javascript
js实现按钮加背景图片常用方法
Nov 01 #Javascript
js实现网页随机切换背景图片的方法
Nov 01 #Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 #Javascript
一个检测表单数据的JavaScript实例
Oct 31 #Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 #Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 #Javascript
You might like
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
php命令行模式代码实例详解
2021/02/26 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
常用的javascript设计模式
2017/01/11 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue实现抖音时间转盘
2019/09/08 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python多进程中的内存复制(实例讲解)
2018/01/05 Python
python http基本验证方法
2018/12/26 Python
python实现简单俄罗斯方块
2020/03/13 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
拾金不昧表扬信范文
2014/01/11 职场文书
副处级干部考察材料
2014/05/17 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
初中生活随笔
2015/08/15 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android