第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

從 HTML 事件運(yùn)行 javascript 函數(shù)

從 HTML 事件運(yùn)行 javascript 函數(shù)

慕田峪7331174 2022-10-21 15:13:03
我正在開(kāi)發(fā)一個(gè)在頁(yè)面滾動(dòng)上制作動(dòng)畫(huà)的項(xiàng)目。這是我想要制作動(dòng)畫(huà)的元素。<h1 style="position: relative; top: 0; left: 0;"        onscroll="animateAfterPosition(200)"        data-animate-left="50px" data-animate-top="50px"         data-animate-time="0.2s">Animation on scroll</h1>這是我的 JavaScriptfunction animateAfterPosition(scroll) {console.log(scroll);    function(){         if (window.scrollY <= scroll) {            this.classList.add('animateAfterPosition');        } else {            this.classList.remove('animateAfterPosition');        }}這是我的 CSS.animateAfterPosition {transition: attr(data-animate-time);left: attr(data-animate-left);top: attr(data-animate-top);}我需要從 html 運(yùn)行函數(shù) animateAfterPosition。我希望使用 onscroll 事件運(yùn)行該函數(shù)，但它不起作用。那么我該怎么做呢？編輯我發(fā)現(xiàn) css attr() 僅適用于該content:屬性，我設(shè)法用 JavaScript 做到了
查看完整描述

2 回答

?
波斯汪

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個(gè)贊

您需要添加選擇器來(lái)切換動(dòng)畫(huà)類(lèi)。而且您當(dāng)前的 css 沒(méi)有足夠的高度來(lái)制作滾動(dòng)窗口。這是一個(gè)簡(jiǎn)單的片段來(lái)運(yùn)行你的函數(shù) onload、更新 onscroll 和切換類(lèi)。


var dataAnimate = document.querySelector('[data-animate]');


function animateAfterPosition(scroll) {

  dataAnimate.classList.toggle('active', window.scrollY <= scroll);

}


window.addEventListener("scroll", function() {

  return animateAfterPosition(200);

});

.animateAfterPosition {

  transition: attr(data-animate-time);

  left: attr(data-animate-left);

  top: attr(data-animate-top);

}


[data-animate] {

  height: 1000px;

}

<body onload="animateAfterPosition(200)">

  <h1 style="position: relative; top: 0; left: 0;"data-animate-left="50px" data-animate-top="50px" data-animate-time="0.2s" data-animate>Animation on scroll</h1>

</body>

小提琴：https ://jsfiddle.net/rafonzoo/phmg0u46/


查看完整回答
反對(duì) 回復(fù) 2022-10-21
?
慕蓋茨4494581

TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊

簡(jiǎn)約的解決方案

您可以使用函數(shù)中的前 4 個(gè)變量對(duì)其進(jìn)行配置。我建議將指標(biāo)類(lèi)添加到正文本身，然后使用像body.beyond-that-point h1. 這樣，當(dāng)滾動(dòng)發(fā)生時(shí)，可以使多個(gè)標(biāo)簽的行為有所不同。


你可以在這里測(cè)試

這個(gè)版本使用了更高級(jí)的效果，但背后的邏輯是一樣的。

https://deneskellner.com/stackoverflow-examples/62623588/index.html


<!doctype html>

<html>

<style>

    body.beyond-that-point {background:silver;}

    div.text {padding:75vh 0px;text-align:center;}

</style>

<body>


    <div class="text">

        Scroll me down and the background will change

    </div>


    <script>


        setTimeout(function() {


            var amount          = 100;                  //  how many pixels before the miracle happens

            var beyondClass     = 'beyond-that-point';  //  this class will be added

            var targetSelector  = 'body';               //  which element to add the class to

            var checkMS         = 20;                   //  check scroll position every N milliseconds


            var eClass = document.querySelector(targetSelector).classList;

            setInterval(function() {

                var y = window.scrollY;

                var c = beyondClass;

                var isBeyond = !!(y>=amount)?1:0;

                if(isBeyond==1) if(!eClass.contains(c)) eClass.add(c);

                if(isBeyond==0) if( eClass.contains(c)) eClass.remove(c);

            },checkMS);


        },1);


    </script>

</body>

</html>

注意：有更好的方法來(lái)檢查 DOM 準(zhǔn)備情況，但為了簡(jiǎn)單起見(jiàn)，我setTimeout在這里使用。隨意改變它。


查看完整回答
反對(duì) 回復(fù) 2022-10-21
  • 2 回答
  • 0 關(guān)注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)