communauté Apprendre Bibliothèque d'outils Loisirs

Français

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

1718 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：

css html php

source：php.cn

Article précédent：php socket 编程的时候，报错后，报错内容乱码？？ Article suivant：求助nginx伪静态规则转为apache

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

Derniers articles par auteur