jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放
引入JQ文件，如下
<script src="jquery-1.10.2.min.js"></script>
css样式，如下
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;}
html代码，如下
<body class="chang_fontSize">
<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>
JS代码如下
// 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" );
}
882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
