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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

通過滾動和調(diào)整滾動大小在“關(guān)于”部分中使用英雄圖像

通過滾動和調(diào)整滾動大小在“關(guān)于”部分中使用英雄圖像

收到一只叮咚 2023-06-29 21:06:59
我正在構(gòu)建我的作品集網(wǎng)站,我想通過移動和調(diào)整圖像大小來將英雄部分圖像用于“關(guān)于我們”的下一部分,作為猜測,我已經(jīng)固定了圖像必須滾動的大約 700 像素的高度。但問題是它無法調(diào)整屏幕尺寸。有沒有辦法移動它,使其始終適合滾動部分?下面是顯示問題的代碼片段和 gif。<!--HTMl--><section class="hero" id="hero">    <div id="hero-img" class="hero-img" ><img  src="main.png"></div>   </section>/*CSS*/.hero .hero-img{    margin-left: auto;    position: absolute;    right: 0;    opacity: 1;    bottom: 0;    max-height: auto;    max-width: 100%;  }.hero .hero-img img{    max-height: 100%;    max-width: 100%;    min-width: 160px;    min-height: 320px;  }//JavaScript//$(window).bind('scroll',function(e){parallaxScroll();});function parallaxScroll(){    var scr = $(window).scrollTop();   var scrolled =document.getElementsByName('hero-img').length - $(window).scrollTop();     if(scr<690){       $('.hero-img').css('top',(0-(scrolled*1.1))+'px');       $('.hero-img').css('right',(0-(scrolled*.3))+'px');    }    else    {        $('.hero-img').css('top',('top'-(scrolled*1.1))+'px');        $('.hero-img').css('right',('right'-(scrolled*.3))+'px');    }   }調(diào)整大小時出現(xiàn)問題
查看完整描述

1 回答

?
慕勒3428872

TA貢獻1848條經(jīng)驗 獲得超6個贊

代碼的作用是什么:


獲取具有 ID 的元素的位置id ="skills",并從該值中減去圖片所在的 DIV 元素的高度,并將該值設(shè)置為滾動的最大值。


您已手動設(shè)置690。變化是,現(xiàn)在這個 IF 自動監(jiān)聽,哪個將首先出現(xiàn)id ="skills"或690


我希望我對你有所幫助


$(window).bind('scroll', function (e) {

    parallaxScroll();

});


function parallaxScroll() {

    var scr = $(window).scrollTop();

    var nel = $("#skills").offset().top - $("#hero-img").height();

    

    var scrolled = $('#hero-img').length - $(window).scrollTop();


    if (scr < nel && scr < 690) {

        $('.hero-img').css('top', (0 - (scrolled * 1.1)) + 'px');

        $('.hero-img').css('right', (0 - (scrolled * .3)) + 'px');

    }

    else {

        $('.hero-img').css('top', ('top' - (scrolled * 1.1)) + 'px');

        $('.hero-img').css('right', ('right' - (scrolled * .3)) + 'px');

    }


}

.hero .hero-img {

    margin-left: auto;

    position: absolute;

    right: 0;

    opacity: 1;

    /* bottom: 0; */

    top: 0px;

    max-height: auto;

    max-width: 100%;

}


.hero .hero-img img {

    max-height: 100%;

    max-width: 100%;

    min-width: 160px;

    min-height: 320px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<section class="hero" id="hero">

    <div id="hero-img" class="hero-img">

        <img src="main.png">

    </div>

</section>


<div>

    ABOUT

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>


<div id="skills">

    SKILLS

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>


查看完整回答
反對 回復 2023-06-29
  • 1 回答
  • 0 關(guān)注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

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