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按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
JavaScript两种计时器的实例讲解
Jan 31 Javascript
详解Vue router路由
Nov 20 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(1)
2006/10/09 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
详解php命令注入攻击
2019/04/06 PHP
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用pil生成缩略图的方法
2015/03/26 Python
Python多进程机制实例详解
2015/07/02 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python用for循环求和的方法总结
2019/07/08 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
计算机专业毕业生自荐信
2013/12/31 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
高中班主任心得体会
2016/01/07 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers