搜尋

首頁  >  問答  >  主體

javascript - 原生js寫的行動端日期選擇, 怎麼讓他是適配到頁面端。

原生js寫的行動端日期選擇, 怎麼讓他是適配到頁面端。 。 。下面的程式碼不是我寫的。我是從網路上找過來的。

日期控制 位址連結:https://github.com/xfhxbb/lCa...

我是這上面下載過來了。 。

//触摸开始
        function gearTouchStart(e) {
            e.preventDefault();
            var target = e.target;
            while (true) {
                if (!target.classList.contains("gear")) {
                    target = target.parentElement;
                } else {
                    break
                }
            }
            clearInterval(target["int_" + target.id]);
            target["old_" + target.id] = e.targetTouches[0].screenY;
            target["o_t_" + target.id] = (new Date()).getTime();
            var top = target.getAttribute('top');
            if (top) {
                target["o_d_" + target.id] = parseFloat(top.replace(/em/g, ""));
            } else {
                target["o_d_" + target.id] = 0;
            }
        }
        //手指移动
        function gearTouchMove(e) {
            e.preventDefault();
            var target = e.target;
            while (true) {
                if (!target.classList.contains("gear")) {
                    target = target.parentElement;
                } else {
                    break
                }
            }
            target["new_" + target.id] = e.targetTouches[0].screenY;
            target["n_t_" + target.id] = (new Date()).getTime();
            //var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / target.clientHeight;
            var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / 370;
            target["pos_" + target.id] = target["o_d_" + target.id] + f;
            target.style["-webkit-transform"] = 'translate3d(0,' + target["pos_" + target.id] + 'em,0)';
            target.setAttribute('top', target["pos_" + target.id] + 'em');
        }
        //离开屏幕
        function gearTouchEnd(e) {
            e.preventDefault();
            var target = e.target;
            while (true) {
                if (!target.classList.contains("gear")) {
                    target = target.parentElement;
                } else {
                    break;
                }
            }
            var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]);
            if (Math.abs(flag) <= 0.2) {
                target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08);
            } else {
                if (Math.abs(flag) <= 0.5) {
                    target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16);
                } else {
                    target["spd_" + target.id] = flag / 2;
                }
            }
            if (!target["pos_" + target.id]) {
                target["pos_" + target.id] = 0;
            }
            rollGear(target);
        }
        
        
  

#
  
  
 在页面端怎么都没用。。。  
  

#在行動端是可以捲動的。

需要讓他適配到頁面端。 。

仅有的幸福仅有的幸福2706 天前907

全部回覆(3)我來回復

  • 为情所困

    为情所困2017-06-26 10:52:48

    謝邀.
    pc端沒用是因為它所有綁定的事件都是touchstart、touchmove和touchend。你可以這樣改下試試:先在私有變數加仨變量,然後在init裡加段辨識pc端還是行動端的程式碼,辨識了確定仨變數是行動端事件還是pc端事件,最後所有的事件綁定都改成這仨變數就好了。

    回覆
    0
  • 漂亮男人

    漂亮男人2017-06-26 10:52:48

    你截取的是實現動畫效果的那塊,看了綁定動畫的事件,全都綁定在touch 事件上,
    應該本來就不支持滑鼠事件,試了下直接把這些動畫綁定到滑鼠事件是不匹配的。

    首先你應該判斷是否 PC 端,
    其中一個方法如下:

    function IsPC(){    
         var userAgentInfo = navigator.userAgent;  
         var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");    
         var flag = true;    
         for (var v = 0; v < Agents.length; v++) {    
             if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }    
         }    
         return flag;    
      }  

    然後你可以對應綁定事件,對應關係如下:

    mousedown touchstart pointerdown
    mouseenter pointerenter
    mouseleave pointerleave
    mousemove touchmove pointermove
    mouseout pointerout
    mouseover pointerover
    mouseup touchend pointerup

    對此參考:https://mobiforge.com/design-...

    最後頁面端的拖曳動畫得你自己弄了。 。
    另一個解決方案是先判斷 pc / 行動端,
    在 pc 端上直接呼叫別的套件得了,
    不用想這個本來針對行動端開發的套件如何適配頁面端的問題。

    回覆
    0
  • PHP中文网

    PHP中文网2017-06-26 10:52:48

    謝邀。

    個人建議PC端和行動端分開寫,對於結構比較複雜的管理型系統,寫入響應式網頁比分別針對 PC 和行動寫兩個版本成本和技術風險都要高得多。而且就是從使用者體驗的角度來說,PC 和行動本來就有不同的體驗,分開寫也比較適合。純粹展示性的頁面寫響應式問題不大,用響應式CSS框架就可以解決。

    回覆
    0
  • 取消回覆