Skalakan teks agar sesuai dengan saiz penyemak imbas dengan peralihan-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Skalakan teks agar sesuai dengan saiz penyemak imbas dengan peralihan

P粉459578805 2023-09-08 11:11:22

569

Saya mempunyai beberapa teks yang ingin saya ubah saiz kepada 100% penyemak imbas apabila menuding di atas butang. Bagaimanakah saya boleh menjadikan teks ini muat dalam penyemak imbas/bekas?

Saya tahu tentang menggunakanfont size，您可以执行类似font-size:100vwtetapi animasi saiz fon sangat tidak stabil jadi saya tidak boleh menggunakan kaedah ini.

http://jsfiddle.net/0n15mfyL/

Bagi mereka yang tertanya-tanya tentang dithering, ia adalah ketara apabila fon dikecilkan: http://jsfiddle.net/rbk48upd/

P粉459578805

membalas semua (1)

P粉7295188062023-09-09 09:58:14 Tingkat 1

Saya sedang mempertimbangkanrequestAnimationFrame()

const hoverMe = document.querySelector('#hover-me') , animTextSizing = document.querySelector('#anim-text-sizing') , txtSizeStart = parseInt(window.getComputedStyle(animTextSizing).getPropertyValue('font-size')) ; let sizeLimit = 0, currentTxtSize = txtSizeStart ; hoverMe.onmouseover =_=> { sizeLimit = document.body.clientWidth; animGrow(); } hoverMe.onmouseout =_=> { sizeLimit = txtSizeStart; currentTxtSize++ animReduce(); } function animGrow() { animTextSizing.style['font-size'] = `${++currentTxtSize}px`; if ( animTextSizing.clientWidth < sizeLimit) requestAnimationFrame(animGrow); } function animReduce() { animTextSizing.style['font-size'] = `${--currentTxtSize}px`; if ( currentTxtSize > sizeLimit) requestAnimationFrame(animReduce); }

* { margin : 0; padding : 0; } #anim-text-sizing { font-size : 30px; width : fit-content; white-space : nowrap; background : #aabfe5; } #hover-me { position : fixed; background : red; color : white; top : 50%; left : 50%; padding : .5rem; cursor : zoom-in; }