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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
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获取文件相对路径的方法
2015/02/26 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
JS实现简单的Canvas画图实例
2013/07/04 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
python转换摩斯密码示例
2014/02/16 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
使用Pycharm分段执行代码
2020/04/15 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
软件测试面试题
2014/01/05 面试题
大学生标准推荐信范文
2013/11/25 职场文书
校园十大歌手策划书
2014/02/01 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
十周年庆典策划方案
2014/06/03 职场文书
小学班主任培训方案
2014/06/04 职场文书
董事长秘书工作职责
2014/06/10 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书