分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

jQuery字体缩放缩放插件zoomFontSize.js

发布时间:2023-09-06 01:57责任编辑:苏小强关键词:jsjQuery
插件描述:jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放,兼容性如下:

使用方法

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

缺点:

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

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

插件源码:

 1 // JavaScript Document 2 //屏幕的宽度 3 //屏幕的宽度 4 ????var width_srceen = screen.width ; 5 ????var font_size = ?""; 6 ????//窗口缩放时执行 7 ????window.onresize=function(){ 8 ????????changbody_fontSize(".chang_fontSize"); 9 ????}10 ????//加载时执行11 ????window.onload = function(){12 ????????$("html").css("-webkit-text-size-adjust"13 ????????,"none");14 ????????font_size = $(".chang_fontSize").css("font-size").split("px")[0];15 ????????changbody_fontSize();16 ????}17 ????//根据屏幕的宽度与窗体的倍数进行字体的缩放18 ????function changbody_fontSize(obj){19 ????????var new_window_width = $(window).width();20 ????????var multiple =new_window_width/width_srceen;21 ????????var hi =font_size * multiple;22 ????????$(".chang_fontSize").css("font-size" ,hi+"px" );23 ????}24 ????

实例:

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>字体缩放</title> 6 <script src="jquery-1.10.2.min.js"></script> 7 <script src="zoomFontSize.js"></script> 8 <style> 9 ????body{ ???10 ????????font-size:26px;11 ????}12 ????.size52px{13 ????????font-size:200%;14 ????}15 16 ????.size26px{17 ???????font-size:100%;18 ????}19 ????ul li{20 ???????padding-bottom:40px;21 ????}22 ????.Explain{23 ????????margin-top:100px;24 ????????font-size:80%;25 ????????margin-bottom:200px;26 ????}27 ????.Explain ul li{28 ???????padding-bottom:2px;29 ????}30 31 </style>32 </head>33 <body class="chang_fontSize">34 ????????<div class="Explain">35 ????????????使用方法:body 的 class属性 添加 changbody_fontSize 而且整个页面的字体属性设为百分比(body除外) <br />36 ????????????缺点:<ul>37 ????????????????????<li>1.需要根据父类进行百分比 缩放</li>38 ????????????????????<li>2.Chrome 字体缩放最小值为12px 就无法进行缩放</li>39 ?????????????????</ul>40 ????????</div>41 ????????<div class="size52px">42 ????????????????全局缩放:<br />43 ????????????<ul>44 ????????????????????<li style="font-size:100%;color:#c0f">45 ????????????????????????当前类为是父类的百分之100%(52px)-(body:26px; 父类body的200%[52px])46 ????????????????????</li>47 ????????????????????<li style="font-size:50%;color:#f00">48 ????????????????????????当前类为是父类的百分之50%(26px)-(body:26px; 父类body的200%[52px])49 ????????????????????</li>50 ????????????????????<li style="font-size:40%;color:#000">51 ????????????????????????当前类为是父类的百分之20%(20.8px)-(body:26px; 父类body的200%[52px])52 ????????????????????</li>53 ????????????</ul>54 ????????</div>55 ????????<div style="font-size:26px;">56 ????????????????局部缩放:<br /> ???57 ????????????????<ul class="chang_fontSize">58 ????????????????????<li style="font-size:100%;color:#c0f">59 ????????????????????当前类为是父类的100%;(26px)-(父类为:26px)60 ????????????????????</li>61 ????????????????????<li style="font-size:80%;color:#f00">62 ????????????????????当前类为是父类的80%;(20.8px)-(父类为:26px)63 ????????????????????</li>64 ????????????????????<li style="font-size:50%;color:#000">65 ????????????????????当前类为是父类的50%;(20.8px)-(父类为:26px)66 67 ????????????????????</li>68 ????????????????</ul>69 ????????</div>70 </body>71 </html>

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

jQuery字体缩放缩放插件zoomFontSize.js

原文地址:https://www.cnblogs.com/joyco773/p/9126419.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved