Home >Backend Development >PHP Tutorial >On the web page, move the font-size downward to become larger, and move the font-size upward to become smaller.

On the web page, move the font-size downward to become larger, and move the font-size upward to become smaller.

WBOY
WBOYOriginal
2016-09-21 14:12:551710browse

When the web page moves downward, the font-size automatically becomes larger. When the web page moves upward, the font-size automatically becomes smaller.
Website: www.rongmeienze.com This is what it looks like

Reply content:

When the web page moves downward, the font-size automatically becomes larger. When the web page moves upward, the font-size automatically becomes smaller.
Website: www.rongmeienze.com This is what it looks like

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

No need to use other people’s JS. Just write it yourself

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

PS: It is best to judge the size according to your needs. It cannot reduce itself to zero~ There is still something wrong with your demo site.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn