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 相关文章推荐
获取表单控件原始(初始)值的方法
Aug 21 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 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新手上路(九)
2006/10/09 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
详解React 元素渲染
2020/07/07 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python障碍式期权定价公式
2019/07/19 Python
python画图常规设置方式
2020/03/05 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
三年级班级文化建设方案
2014/05/04 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
三峡导游词
2015/01/31 职场文书
2015年端午节活动总结
2015/02/11 职场文书
python实现简单倒计时功能
2021/04/21 Python
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技