插件描述：jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放，兼容性如下：

使用方法

body 的class属性 添加 changbody_fontSize 而且整个页面的字体属性设为百分比（body除外）

缺点：

1.需要根据父类进行百分比 缩放

2.Chrome 字体缩放最小值为12px 就无法进行缩放

插件源码：

 // JavaScript Document

 //屏幕的宽度

 //屏幕的宽度

     var width_srceen = screen.width ;

     var font_size =  "";

     //窗口缩放时执行

     window.onresize=function(){

         changbody_fontSize(".chang_fontSize");

     }

     //加载时执行

     window.onload = function(){

         $("html").css("-webkit-text-size-adjust"

         ,"none");

         font_size = $(".chang_fontSize").css("font-size").split("px")[0];

         changbody_fontSize();

     }

     //根据屏幕的宽度与窗体的倍数进行字体的缩放

     function changbody_fontSize(obj){

         var new_window_width = $(window).width();

         var multiple =new_window_width/width_srceen;

         var hi =font_size * multiple;

         $(".chang_fontSize").css("font-size" ,hi+"px" );

     }

实例：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>字体缩放</title>

 <script src="jquery-1.10.2.min.js"></script>

 <script src="zoomFontSize.js"></script>

 <style>

     body{

         font-size:26px;

     }

     .size52px{

         font-size:200%;

     }

     .size26px{

        font-size:100%;

     }

     ul li{

        padding-bottom:40px;

     }

     .Explain{

         margin-top:100px;

         font-size:80%;

         margin-bottom:200px;

     }

     .Explain ul li{

        padding-bottom:2px;

     }

 </style>

 </head>

 <body class="chang_fontSize">

         <div class="Explain">

             使用方法：body 的 class属性 添加 changbody_fontSize 而且整个页面的字体属性设为百分比（body除外） <br />

             缺点：<ul>

                     <li>1.需要根据父类进行百分比 缩放</li>

                     <li>2.Chrome 字体缩放最小值为12px 就无法进行缩放</li>

                  </ul>

         </div>

         <div class="size52px">

                 全局缩放：<br />

             <ul>

                     <li style="font-size:100%;color:#c0f">

                         当前类为是父类的百分之100%（52px)-(body:26px; 父类body的200%[52px])

                     </li>

                     <li style="font-size:50%;color:#f00">

                         当前类为是父类的百分之50%（26px）-(body:26px; 父类body的200%[52px])

                     </li>

                     <li style="font-size:40%;color:#000">

                         当前类为是父类的百分之20%（20.8px）-(body:26px; 父类body的200%[52px])

                     </li>

             </ul>

         </div>

         <div style="font-size:26px;">

                 局部缩放：<br />

                 <ul class="chang_fontSize">

                     <li style="font-size:100%;color:#c0f">

                     当前类为是父类的100%;(26px)-(父类为：26px)

                     </li>

                     <li style="font-size:80%;color:#f00">

                     当前类为是父类的80%;(20.8px)-(父类为：26px)

                     </li>

                     <li style="font-size:50%;color:#000">

                     当前类为是父类的50%;(20.8px)-(父类为：26px)

                     </li>

                 </ul>

         </div>

 </body>

 </html>

原文地址：http://www.jq22.com/jquery-info579

jQuery字体缩放缩放插件zoomFontSize.js的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

  3. jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)

    1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...

  4. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  5. jQuery 全屏滚动插件 fullPage.js 参数说明

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  6. 学习 | jQuery全屏滚动插件FullPage.js

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...

  7. 【转载】jQuery全屏滚动插件fullPage.js

    文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...

  8. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  9. 强大的jQuery图片查看器插件Viewer.js

    简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...

随机推荐

  1. inception_v2版本《Rethinking the Inception Architecture for Computer Vision》(转载)

    转载链接:https://www.jianshu.com/p/4e5b3e652639 Szegedy在2015年发表了论文Rethinking the Inception Architecture ...

  2. Delphi 的 FireDAC 连接管理与配置过程

    Delphi 的 FireDAC 连接管理与配置过程: 使用 FireDAC 技术连接 数据库,主要是使用  TFDConnection ,其中有一参数是选择  ConnectionDefFile. ...

  3. MySQL死锁查询【原创】

    死锁详情查询 SELECT SUM(trx_rows_locked) AS rows_locked, SUM(trx_rows_modified) AS rows_modified, SUM(trx_ ...

  4. leetcode 307 Range Sum Query

    问题描述:给定一序列,求任意区间(i, j)的元素和:修改任意一元素,实现快速更新 树状数组 树状数组的主要特点是生成一棵树,树的高度为logN.每一层的高度为k,分布在这一层的序列元素索引的二进制表 ...

  5. Qt学习之路

      Qt学习之路_14(简易音乐播放器)   Qt学习之路_13(简易俄罗斯方块)   Qt学习之路_12(简易数据管理系统)   Qt学习之路_11(简易多文档编辑器)   Qt学习之路_10(Qt ...

  6. apache做反向代理服务器

    apache代理分为正向代理和反向代理: 1 正向代理: 客户端无法直接访问外部的web,需要在客户端所在的网络内架设一台代理服务器,客户端通过代理服务器访问外部的web(需要在客户端的浏览器中设置代 ...

  7. 2018 Multi-University Training Contest - Team 1 题解

    Solved A HDU 6298 Maximum Multiple Solved B HDU 6299 Balanced Sequence Solved C HDU 6300 Triangle Pa ...

  8. Alpha 冲刺 （6/10）

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:感恩节~ 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 设计了拍照界面和图片上传界面 沟通了前端进度 接下 ...

  9. Python-视图 触发器 事务 存储过程

    1.视图2.触发器*** 在某个时间发生了某个事件时 会自动触发一段sql语句3.事务*****4.存储过程***** 5.函数6.备份与恢复*** mysqldump -u -p (库名 [表名] ...

  10. Python- 索引 B+数 比如书的目录

    1.索引 为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题, 在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作, 因此对查询 ...