masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > pembangunan bahagian belakang > tutorial php > web端页面向下移动font-size变大，向上移动font-size变小

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

WBOY

Lepaskan： 2016-09-21 14:12:55

asal

1716 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Label berkaitan：

css html php

sumber：php.cn

Artikel sebelumnya：php socket 编程的时候，报错后，报错内容乱码？？ Artikel seterusnya：求助nginx伪静态规则转为apache

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang