快捷導(dǎo)航

jQuery實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)元素功能詳解

更新時(shí)間：2023年06月30日 10:43:09 作者：Skywang

這篇文章主要為大家介紹了jQuery實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)元素功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

jQuery實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)元素

最近做項(xiàng)目做到一個(gè)功能是用左右按鈕取代進(jìn)度條滾動(dòng)，網(wǎng)上沒(méi)有類似的dome就自己寫(xiě)了一個(gè)，挺簡(jiǎn)單不難，廢話不多說(shuō)直接上代碼；

html

// 首先這是一個(gè)固定尺寸的視口div
<div class="scroll_part" style="position: relative;">
 // 這是左按鈕
  <div id="goLeftBtn" class="btn sc_left" style="position: absolute;z-index: 10;">
    <div class="">
      <img src="img/sc_left.png" />
    </div>
  </div>
// 這是右按鈕
  <div id="goRightBtn" class="btn sc_right" style="position: absolute;z-index: 10;">
    <div class="">
      <img src="img/sc_right.png" />
    </div>
  </div>
  // 這里是可以滾動(dòng)的元素
  <div class="content_sc">
    <div id="" class="sc_box" style="position: relative;">
      <img class="sc_img" style="" src="img/programme.png" />
        <div class="dot" style="">//這個(gè)是一個(gè)動(dòng)畫(huà)特效可以不用管
              <div class="dot2 ">
                <div class="dot3"></div>
              </div>
        </div>
    </div>
  </div>
</div>

效果圖

css部分很簡(jiǎn)單就不貼出來(lái)了

js部分

// 滾動(dòng)效果
// 這里主要用到的方法就是$().scrollLeft()；
    var count = 1;
    var goWight = 100;
    $("#goLeftBtn").click(function() {
        if(count == 0) {
            $('.content_sc').scrollLeft(0);
            count = 0;
        } else {
            count--;
            $('.content_sc').scrollLeft(count * goWight);
        }
        console.log("count" + count);
        var aaa = $(".sc_box")
        console.log("offsetWidth" + aaa.offsetWidth);
    })
    $("#goRightBtn").click(function() {
        if(count == 0) {
            $('.content_sc').scrollLeft(goWight);
        } else {
            $('.content_sc').scrollLeft(count * goWight);
        }
        console.log("count" + count);
        var aaa = $(".content_sc")[0].offsetWidth
        var bbb = $(".sc_box")[0].offsetWidth
        if((aaa + count * goWight) > bbb) {
            return;
        }
        count++;
    })
});

代碼很簡(jiǎn)單，以上就是jQuery實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)元素功能詳解的詳細(xì)內(nèi)容，更多關(guān)于jQuery點(diǎn)擊按鈕滾動(dòng)元素的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: