iT邦幫忙

0

jQuery 轉成 js

以下是jQuery的程式,因為一些問題想轉成javascript,請教各位大大

jQuery(document).ready(function(){

  function scrollToDiv3(element,navheight){
        var offset = element.offset();
        var offsetTop = offset.top;
        var totalScroll = offsetTop-navheight;
        var navheight = jQuery('.uk-container uk-container-center');
        //console.log(totalScroll);
        jQuery('body,html').animate({
                scrollTop: totalScroll
        }, 500);
}

function scrollToDiv4(element,navheight){
        var offset = element.offset();
        var offsetTop = offset.top;
        var totalScroll = offsetTop-navheight;
        var navheight = jQuery('#tm-headerbar');
        //console.log(offsetTop);
        jQuery('body,html').animate({
                scrollTop: totalScroll
                //top:windowBottomTarget
        }, 500);

}

  jQuery('.alink').click(function(){
        var el = jQuery(this).attr('href');
        var elWrapped = jQuery(el);
       // scrollToDiv(elWrapped,40);
         if(jQuery(window).scrollTop()<30){
                //console.log(jQuery(this).index());
        scrollToDiv4(elWrapped,170);}
        else{
        scrollToDiv3(elWrapped,90);
        }
});
});
看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2016-12-02 10:51:53 檢舉
所以你的問題是?你只提到你的需求,但是沒提到問題阿?
丹尼 iT邦研究生 4 級 ‧ 2016-12-02 10:58:00 檢舉
他的意思 應該是說 他想把JQUERY 程式碼轉成JAVA程式碼
a5244245 iT邦新手 5 級 ‧ 2016-12-02 11:00:29 檢舉
對的,我想要把上面的那一串程式改寫成js,抱歉剛沒說清楚
fillano iT邦超人 1 級 ‧ 2016-12-02 11:39:55 檢舉
jQuery.animate的實作很複雜,看看有沒有網友願意做功德吧XD

不然你來參加鐵人賽,三十天做完...

1 個回答

3
jsgao0
iT邦新手 5 級 ‧ 2016-12-02 12:51:44

做了個scrollTo function及Demo code,放在jsbin上。 至於怎麼應用,就看你囉! 來把scrollTo主要程式碼說明一下:

function gotoElement(sn, time) {
  var className = 'sn-' + sn, // 這應該不用說,就是class name
      ms = time || 10, // 給定scroll所花的時間(毫秒),若沒設定則為10ms
      el = document.querySelector('.' + className), // 透過class name取得element
      i = 10; // 這個比較特別,用來設定每個frame的呈現時間
              // 太小的話,會因執行速度太慢而在scroll得時候看起來lag
  
  scrollTimout();
  
  // 利用scrollTop function做成的animate function
  function scrollTimout() {
    var runner = setInterval(function() { // 週期執行,並存id在runner,繼續看到**的地方
      if(getNthTimesOffset(i) >= getOffset()) // &&判斷scrollTop有沒有滑到目標的頭頂
        clearInterval(runner); // 若有則清除runner
      scrollTo(getNthTimesOffset(i)); // scrollTo到第n次的位置
      i+= 10; // 第n+1個網格
    }, 10); // **這是周期的時間(毫秒),每10毫秒執行一次,繼續看到&&的地方
  }
  
  // 取得第n次的位置
  function getNthTimesOffset(i) {
    return getOffset() / ms * i;
  }
  
  // 取得元素頭頂位置
  function getOffset() {
    return el.offsetTop;
  }
  
  // 用來scroll的function,傳入offset y軸的值
  function scrollTo(offset) {
    window.scrollTo(0, offset);
  }
}
fillano iT邦超人 1 級 ‧ 2016-12-02 13:40:11 檢舉

印象中jQuery使用了用requestAnimationFrame實作時必需的思路:在每次timeout發生時,會計算跟start time的時差,然後用這個時差根據一個曲線的公式算出offset,最後執行動作。動作有慢->快->慢的效果,因為offset是這樣算出來的。

jsgao0 iT邦新手 5 級 ‧ 2016-12-05 17:00:53 檢舉

謝謝fillano大的說明,我做了另一個用requestAnimationFrame的版本

我要發表回答

立即登入回答