首页 建站教程 WEB前端 正文

根据窗口大小,自动缩放文字大小

引用jquery.min.js及以下JS代码将以下代码保存为fontFlex.js(function($) { $.fn.fontFlex = function(min, max, mid) { var $this = this; &n...

引用Jquery.min.js及以下JS代码

将以下代码保存为fontFlex.js

(function($) {
    $.fn.fontFlex = function(min, max, mid) {
        var $this = this;
        $(window).resize(function() {
            var size = window.innerWidth / mid;
            if (size < min) size = min;
            if (size > max) size = max;
            $this.css('font-size', size + 'px');
        }).trigger('resize');
    };
})(jQuery);



html应用:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/fontFlex.js"></script>
<script type="text/javascript">
    $(function() {$('.text').fontFlex(20, 60, 40);});	
</script>
</head>


<body>
 <dvi class="text">
 <p>荷花是我国十大名花之一,为多年水生植物,可分为藕莲、子莲和花莲三大系统。 它“出淤泥而不染,濯清涟而不妖”。</P>
 <p>在人们心中,荷花是高尚纯洁的象征。那么荷花、荷叶为什么能“出淤泥而不染”呢?原来,在它们的外表层布满了蜡质, 而且有许多乳头状的突起, 
突起之间充满着空气,挡着污泥浊水的渗入。</p>
 </div>
</body>
</html>


打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:http://www.umtheme.com/web/45.html

相关推荐

纯css实现列表自动添加序号

纯css实现列表自动添加序号

我们写样式代码时偶尔会用到数字排行榜的设计,按序号罗列排名,例如:优美mipCms主题中的热门/热评排行:如果用li元素配合list-s...
WEB前端 2021.07.18 0 1002
Js简单实现复制指定内容到粘贴板

Js简单实现复制指定内容到粘贴板

通过以下代码,点击按钮可直接把input或者textarea里的值复制到粘贴板里,此方法不依赖jquery框架,实现简单粗暴希望对大家有所帮助。<!DOCTYPE html>...
WEB前端 2021.04.14 0 1241
Js实现双击鼠标自动滚动页面效果

Js实现双击鼠标自动滚动页面效果

主要介绍了Js实现双击鼠标自动滚动页面的示例代码,在特定的页面也许可以用的的上例如小说或一些资讯类型的网站,需要的朋友可以试一试。操作比较简单把以下代码加在网站的页面中,就可以实现双击鼠标实现自动滚屏...
WEB前端 2021.03.15 0 1287
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持