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

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

WBOY
發布: 2016-09-21 14:12:55
原創
1716 人瀏覽過

當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:最好是根據需要,判斷下大小。不能自減到為零~你的演示站還是有問題的。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板