Maison > développement back-end > tutoriel php > web端页面向下移动font-size变大,向上移动font-size变小

web端页面向下移动font-size变大,向上移动font-size变小

WBOY
Libérer: 2016-09-21 14:12:55
original
1717 Les gens l'ont consulté

当web页面向下移动font-size自动变大,当web页面向上移动font-size自动变小,
网址:www.rongmeienze.com 这个样子

回复内容:

当web页面向下移动font-size自动变大,当web页面向上移动font-size自动变小,
网址:www.rongmeienze.com 这个样子

<code>http://www.rongmeienze.com/statics/js/theme_trust.js
监听滚动事件,然后得到滚动条的scrollTop,再计算字体大小的
jQuery('.b_2 h1').css({
        'font-size' : (scrollPos/6)+"px" ,
       'opacity' : 0+(scrollPos/500)
    });</code>
Copier après la connexion

不用使用别人的JS。自己写就可以了

<code>jQuery(window).scroll(function() {         
          var  scrollPos = jQuery(this).scrollTop();
          jQuery('.youClass h1').css({   //这里是你需要改变大小的对象
        'font-size' : (scrollPos/6)+"px" ,
       'opacity' : 0+(scrollPos/500)
    });    
        });</code>
Copier après la connexion

PS:最好根据需要,判断下大小。不能自减到为零~你的演示站还是有问题的。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal