header欄的一個(gè)特效

思路

• 在滾動事件中 寫邏輯 修改 通欄的透明度

• 需要設(shè)置滾動的范圍 滾動的距離 跟輪播圖的高度一致即可

  1. 獲取變量 通欄 輪播圖的高度

  2. 為window綁定事件 onscroll

  3. 在事件中,獲取 滾動的距離 / 輪播圖的高度 獲取 比例值
     當(dāng)比例值 超過1時(shí) 就沒有必要設(shè)置了
     if (比例值>1) {
     比例值=1;
     }

function header(){
    // 獲取 通欄dom元素
    var headerDom = document.querySelector('header');

    // 獲取 輪播圖的高度 jq中 才是 height()
    var bannerHeight = document.querySelector('.jd_banner').offsetHeight;

    // 定義 最大的 透明度
    var maxNum = 0.9;

    // 定義 最大的比例值
    var maxPercent = 1.0;

    // 綁定事件
    window.onscroll = function(){
        // 獲取 滾動的距離
        // console.log(document.body.scrollTop);

        // 計(jì)算比例
        var percent = document.body.scrollTop/bannerHeight; 

        console.log(percent);

        // 修改 計(jì)算出來的比例值
        if (percent>maxPercent) {
            percent = maxPercent;
        }

        // 這里設(shè)置即可
        headerDom.style.backgroundColor = 'rgba(201,21,35,'+percent*maxNum+')';
    }
}

倒計(jì)時(shí)特效

• 定義變量 記錄總時(shí)間

• 使用interval 進(jìn)行倒計(jì)時(shí)到interval設(shè)置的 函數(shù)中 進(jìn)行倒計(jì)時(shí)操作
  總時(shí)間--; 3600s
  秒 轉(zhuǎn)化為 時(shí) 分 秒
  設(shè)置到dom元素中

  1.定義變量 總時(shí)間 獲取 需要修改的span

  2.開啟定時(shí)器

  3.定時(shí)器的內(nèi)部邏輯
  時(shí)間--;
  格式化秒 為 時(shí)分秒
  設(shè)置給對應(yīng)的 dom元素

function countTime(){
    // 總時(shí)間 秒
    var totalNum = 5*60*60;
    // var totalNum = 3;

    // 獲取 修改的span
    var timeSpans = document.querySelectorAll('.downTime span');

    // 封裝 設(shè)置事件的 函數(shù)
    var setTime = function(){
        // 格式化為 時(shí)分秒  3690
        var hour = Math.floor(totalNum / 3600);

        var minute = Math.floor(totalNum % 3600 / 60);

        var second = totalNum % 60;

        // 設(shè)置給 對應(yīng)的span
        // 設(shè)置時(shí) 假設(shè) 有11小時(shí)
        timeSpans[0].innerHTML = Math.floor(hour / 10); //獲取 十位
        timeSpans[1].innerHTML = hour % 10; //獲取 個(gè)位

        // 設(shè)置 分 56分鐘
        timeSpans[3].innerHTML = Math.floor(minute / 10);//獲取 十位
        timeSpans[4].innerHTML = minute % 10; //獲取 個(gè)位

        // 設(shè)置 秒 45分鐘
        timeSpans[6].innerHTML = Math.floor(second / 10);//獲取 十位
        timeSpans[7].innerHTML = second % 10; //獲取 個(gè)位
    }

    // 設(shè)置 默認(rèn)顯示的時(shí)間
    setTime();


    // 開啟倒計(jì)時(shí)
    var timeID = setInterval(function(){

        // 如果 時(shí)間變?yōu)? 那么 關(guān)閉定時(shí)器 同時(shí)提示用戶
        if (totalNum<=0) {
            // 關(guān)閉定時(shí)器
            clearInterval(timeID);

            // 提示一下
            alert('你來晚啦 ,哈哈哈哈哈 沒有優(yōu)惠了');
            // 統(tǒng)一的彈框 建議 自定義dom元素 display:block

            // 跳出執(zhí)行
            return true;
        }

        // 遞減時(shí)間 秒
        totalNum--;

        // 調(diào)用 抽取的 設(shè)置事件函數(shù)
        setTime();

    },1000);
}

晚上要好好學(xué)習(xí)，天天向上

今天學(xué)習(xí)了輪播圖，倒計(jì)時(shí)，通欄的特效

function banner(){
   //思路：
   //會用到一個(gè)計(jì)時(shí)器，每回走一張下面的索引也要跟著走
   //定義 變量記錄 是哪一張輪播圖

    //定時(shí)器 interval 間隔調(diào)用
    //  索引++;
    //  修改 輪播圖的位置               
    //  口口口口口口口口口口口
    //先定義一下第一張的索引值，因?yàn)榭偣彩畯垐D片，然后最左面有一張，所以當(dāng)前這張的索引值為一
    var index=1;
    //獲取屏幕的寬度
    var width=document.body.offsetWidth;
    //獲取到ul這個(gè)對象
    var ulObj=document.querySelector('.banner_imgs');
    //獲取到那些li標(biāo)簽
    //var lis=document.querySelectorAll('.banner_imgs li');
     //下面的索引的部分，同步一下
          //獲取下面索引部分的ul
    var ulIndex=document.querySelector('.banner_index');
    var liIndex=document.querySelectorAll('.banner_index li');
    //定時(shí)器
    var setId=setInterval(function(){
          //讓一秒走一張圖片
          //讓它的index的值改一下
          index++;
          //如果index大于9的時(shí)候
          if(index>=9){
            index=1;
          }

          ulObj.style.transform='translateX(-'+width*index+'px)';
         for(var i=0;i<liIndex.length;i++){
            //把所有的那個(gè)索引的背景顏色都去掉
            var classlist=liIndex[i].classList;
            classlist.remove('current');
         }
         liIndex[index-1].classList.add('current');

    },2000);

    
}

插入圖片

005xcCKCjw1f4yomjo6vkj30qo0zg7aq.jpg