`
kfcman
  • 浏览: 396926 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQuery 改变页面字体大小

阅读更多
分别定义三个class为increaseFont、decreaseFont、resetFont 的元素。为其click事件添加事件
/*
对页面上的字体增大、缩小、恢复原始大小
需要在html页面中定义三个元素
元素的class分别为 resetFont、increaseFont、decreaseFont
在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大、缩小、恢复原始大小
*/
$(function () {
    //取得字体大小,在html标记下定义了font-size
    var originalFontSize = $("html").css("font-size");
    //恢复默认字体大小
    $(".resetFont").click(function () {
        $("html").css("font-size", originalFontSize);
        //JavaScript不向下执行
        return false;
    });

    //加大字体,某个元素的class定义为increaseFont
    $(".increaseFont").click(function () {
        //取得当前字体大小 后缀px,pt,pc
        var currentFontSize = $("html").css("font-size");
        //取得当前字体大小,parseFloat()转为float类型去除后缀
        var currentFontSizeNumber = parseFloat(currentFontSize);
        //新定义的字体大小
        var newFontSize = currentFontSizeNumber * 1.1;
        //重写样式表
        $("html").css("font-size", newFontSize);
        //JavaScript不向下执行
        return false;
    });

    //减小字体,某个元素的class定义为decreaseFont
    $(".decreaseFont").click(function () {
        //取得当前字体大小 后缀px,pt,pc
        var currentFontSize = $("html").css("font-size");
        //取得当前字体大小,parseFloat()转为float类型去除后缀
        var currentFontSizeNumber = parseFloat(currentFontSize);
        //重新定义字体大小
        var newFontSize = currentFontSizeNumber * 0.9;
        //重写样式表
        $("html").css("font-size", newFontSize);
        //JavaScript不向下执行
        return false;
    });
});
分享到:
评论

相关推荐

    jQuery设置网页字体大小代码

    2. **编写JavaScript代码**:接下来,我们需要编写一段JavaScript代码,使用jQuery选择器找到需要改变字体大小的元素,然后在用户触发的事件(如点击按钮)时更改这些元素的字体大小。以下是一个简单的示例: ```...

    JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

    ### JQuery 改变页面字体大小的实现知识点 #### 1. JQuery 简介 JQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它使用选择器来选取页面上的元素,并提供了各种方法来操作这些元素。JQuery 的核心功能可以...

    jQuery页面文章字体大小调节.zip

    "jQuery页面文章字体大小调节"是一个示例项目,它利用JavaScript库jQuery实现动态调整页面文章字体大小的功能,使得视力不佳或者有特殊阅读需求的用户能够更方便地阅读内容。在这个项目中,我们将探讨jQuery如何与...

    jQuery调整文章字体大小代码.zip

    在这个代码实例中,jQuery被用来监听用户的操作,例如点击一个按钮或者使用键盘快捷键,然后动态改变文章的字体大小。 `jiaoben5064.js`很可能是这个功能的主要实现代码。在JavaScript中,我们可以使用CSS的样式...

    jquery设置字体大小插件

    2. **事件绑定**:插件监听用户的特定事件,如键盘按键(如"+"或"-”用于增大或减小字体)或鼠标滚轮事件,以便根据用户的行为改变字体大小。 3. **字体大小变化**:当检测到这些事件时,插件会根据预设的增量...

    jQuery 调整字体大小详解 (firefox)

    在标题提到的“jQuery 调整字体大小详解(Firefox)”中,我们可以推测文章可能详细介绍了如何在Firefox浏览器中实现这个功能,因为不同的浏览器可能对CSS属性的解析略有差异。Firefox通常支持大部分标准的CSS属性,...

    jQuery设置网页字体大小代码.zip

    // 添加改变字体大小的事件监听器 $('#fontSizeButton').click(function() { var newSize = parseInt($('.fontSizeInput').val()) + 2; // 获取用户输入的新字体大小 $('body').css('font-size', newSize + 'px'...

    基于jQuery页面中文章字体大小调节

    通过以上步骤,我们就实现了基于jQuery的页面字体大小调节功能。这只是一个基础实现,实际应用中可能需要考虑更多细节,如保持行高、段落间距的一致性,以及适应不同设备和屏幕尺寸。同时,为了提高可访问性,也可以...

    jQuery 拖动滑块改变字体大小(效果超酷)

    在本文中,我们将深入探讨如何使用jQuery库实现一个拖动滑块来动态改变网页中字体大小的功能,从而为用户提供一种直观且酷炫的交互体验。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画...

    jQuery滑杆改变页面和文字大小

    当用户移动滑杆时,页面的缩放比例和所有文本的字体大小会随之变化。这种方式不仅限于`body`元素,也可以根据需要针对特定元素进行调整。 需要注意的是,CSS的`zoom`属性在某些浏览器中可能不被支持,这时可以考虑...

    jQuery 拖动滑块改变字体大小

    点击时,根据按钮的标识(可能是类名或ID)判断是增大还是减小字体,然后相应地增加或减少滑块的值,并更新页面字体大小。 此外,这个项目还强调了对中文的良好支持。这意味着在调整字体大小时,不仅英文文本会变化...

    jQuery调整文章字体大小代码

    "jQuery调整文章字体大小代码"就是这样一个功能,允许用户动态改变网页中的文本字体大小,提高阅读舒适度。 jQuery通过选择器找到特定的HTML元素,然后应用相应的样式变化。在这个场景中,我们可能会选择`<p>`...

    jQuery手机字体和图片自适应

    1. 动态调整字体大小:jQuery可以监听窗口resize事件,当屏幕尺寸变化时,动态计算并设置字体大小,以保持内容的可读性。 2. 使用插件:如fitText.js,它能根据容器宽度自动调整字体大小,保持文本充满整个容器。 ...

    jQuery响应式动态修改字体大小代码.zip

    3. **应用比例**:使用这个比例去调整页面中所有或者特定元素的字体大小。例如,通过CSS的`.css()`方法设置`font-size`属性。 4. **优化性能**:为了防止频繁触发回调,可能会使用`requestAnimationFrame`或设定一...

    安装jQuery提示插件后修改字体大小插件

    2. **使用js字体插件**:如果你选择安装一个js插件来调整字体大小,这个插件通常会提供API或事件监听来动态改变页面上的字体大小。例如,一个常见的插件是`jquery.textzoom.js`,它通过监听鼠标滚轮事件来实现字体...

    jQuery页面文章字体大小调节特效代码

    标题 "jQuery页面文章字体大小调节特效代码" 涉及的核心技术是使用jQuery库来实现网页上文章内容的字体大小动态调整功能。jQuery是一个广泛应用于前端开发的JavaScript库,它简化了JavaScript的DOM操作,事件处理,...

    jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果

    3. **设置文本大小**:使用jQuery的`css()`方法来改变元素的字体大小。例如,`$('selector').css('fontSize', 'value')`可以将指定选择器的字体大小设置为指定的值。 4. **媒体查询**:结合CSS3的媒体查询(Media ...

    jquery动态字体跳跃效果.rar

    例如,要让字体大小在20px和40px之间跳跃,可以这样做: ```javascript $("#jumping-text").animate( { fontSize: "40px", lineHeight: "45px" }, 500 // 动画时长,单位毫秒 ).animate( { fontSize: "20px", ...

Global site tag (gtag.js) - Google Analytics