首頁 >後端開發 >php教程 >web端頁面向下移動font-size變大,向上移動font-size變小

web端頁面向下移動font-size變大,向上移動font-size變小

WBOY
WBOY原創
2016-09-21 14:12:551717瀏覽

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

不用使用別人的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>

PS:最好是根據需要,判斷下大小。不能自減到為零~你的演示站還是有問題的。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn