插件描述：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. tar.gz压缩，查看，解压

    本次使用的压缩格式是*.tar.gz,用到的命令如下: 压缩: tar -czf jpg.tar.gz *.jpg //将目录里所有jpg文件打包成jpg.tar后,并且将其用gzip压缩,生成一个g ...

  2. Linux RTC驱动模型分析之rtc-sysfs.c【转】

    转自:https://blog.csdn.net/longwang155069/article/details/52353408 版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...

  3. Python3学习笔记28-HtmlTestRunner

    HtmlTestRunner是unittest模块下的一个拓展,用来生成测试报告.原生的可以自己找下下载地址,原生的看着比较丑.这次使用的是经过一些大佬优化之后的.具体GitHub地址:https:/ ...

  4. ADO读写DateTime方式

    // 读取日期 var = m_pResultSet->GetCollect(_variant_t("Birth_Time")); DATE dt = var.date; C ...

  5. http和ftp下载的区别

    HTTP和FTP是两种网络传输协议的缩写,FTP是File Transportation Protocol(文件传输协议)的缩写,而HTTP则是Hyper Text Transportation Pr ...

  6. 【转】采用dlopen、dlsym、dlclose加载动态链接库

    1.前言 为了使程序方便扩展,具备通用性,可以采用插件形式.采用异步事件驱动模型,保证主控制逻辑不变,将各个业务以动态链接库的形式加载进来,这就是所谓的插件.linux提供了加载和处理动态链接库的系统 ...

  7. gPRC学习笔记

    gPRC学习笔记 gPRC基础教程. gPRC官方文档. protobuf 3.0的简易教程. 什么是RPC RPC(remote procedure call) -- 远程过程调用(相对于本地调用的 ...

  8. page.isvalid

    背景 看到这个标题,想了半天,为啥用的.应该是当初前台要动态增加行这个事情,当初用.net真是用傻了,竟然对html.aspx原理不大清楚,对于html也想着后台生成.真是弱智啊.谈到这里,想到c#这 ...

  9. windows server 2008开启共享文件设置

    之前设置过共享文件,将共享文件映射成磁盘,重新去设置另外服务器的时候,又到网络上找,特此记录 设置网络共享需要开启的服务如下: 以下服务都相关,需要全部开启后才能保证共享正常:1,UPnP Devic ...

  10. hadoop常用命令详细解释

    hadoop命令分为2级,在linux命令行中输入hadoop,会提示输入规则 Usage: hadoop [--config confdir] COMMAND where COMMAND is on ...