插件描述：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. php无法连接mysql问题解决方法总结

    http://www.163ns.com/zixun/post/5295.html     本文章总结了在php开发中可能会常常碰到的一些php连接不了mysql数据库的一些问题总结与解决方法分享,有 ...

  2. Java的if判断对象为null时，null放在比较运算符的左边还是右边较好？

    如java中:if(name == null)和if(null == name)有什么讲究吗? 答:在java里面,它们是一样的.但是通常写为null == name.这其实是在C语言里面引申出来的. ...

  3. layui 左侧三级菜单栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. 安娜Anna：世界最快的超级伸缩的KVS, 秒杀Redis

    伯克利 这个大学在计算机学术界.工业界的地位举足轻重,其中的AMP实验室曾开发出了一大批大获成功. 对计算机行业产生深远影响的分布式计算技术,包括 Spark.Mesos.Tachyon 等.作为AM ...

  5. swoole深入学习 2. tcp Server和tcp Client

    这节来学习Swoole最基础的Server和Client.会通过创建一个tcp Server来讲解. server <?php class Server { private $serv; pub ...

  6. 【进阶4-2期】Object.assign 原理及其实现 （转）

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记  https://github.com/yygmind/blog/issues/26 浅拷贝 Object.assign 上篇文章介绍了其定义和使 ...

  7. 【翻译】关于vertical-align所有你需要知道的

    本文是翻译过来的,如果有不对的地方还请指教~,原文链接:Vertical-Align: All You Need To Know 前面一些说明,可以略过不看吧 我经常需要对元素进行垂直方向上的布局. ...

  8. Mybaits动态Sql

    什么是动态SQL? MyBatis的强大之处便是它的动态SQL,如果你使用JDBC那么在根据不同条件查询时,拼接SQL语句是多么的痛苦. 比如查询一个学生信息,可以根据学生的姓名,性别,班级,年龄,学 ...

  9. Git和Github的基本操作

    一.了解Git和Github 1.什么是GIT? Git是一个免费.开源的版本控制软件 2.什么是版本控制系统? 版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版本修订情况得系统. 系统 ...

  10. 《剑指offer》 树的子结构

    本题来自<剑指offer> 树的子结构 题目: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 思路: 分两步走: 第一步:判断根节点,两个根节 ...