javascript - 移动端有那种跟着手指滑动而移动的插件吗?
高洛峰
高洛峰 2017-04-11 12:35:40
0
2
375

不需要那种滑动切换幻灯片的,可以看成一个宽度很大的元素,手指拨打可以左右水平切换的。

这些都不适用(或者我不会用): swipe.js , touch.js , iscroll.js

我自己写的滑动组件:
关键是保存上一次 touchMove 的 位置 ,但是优化还是不够好。

代码如下:

/** * Created by Administrator on 2016/8/12. */ function Slider(opts){ //¹¹Ô캯ÊýÐèÒªµÄ²ÎÊý this.wrap = opts.dom; this.dire = opts.direction; this.addtion = opts.addtion; this.bindDOM(); } Slider.prototype.bindDOM = function(){ var self = this; var moveP; //ÊÖÖ¸°´ÏµĴ¦Àíʼþ var startHandler = function(evt){ if(moveP.x) console.log(moveP) self.startX = moveP.x ? moveP.x : evt.touches[0].pageX; self.startY = moveP.y ? moveP.y : evt.touches[0].pageY; console.log("start X" + self.startX) }; var moveHandler = function(evt){ //¼æÈÝchrome android£¬×èÖ¹ä¯ÀÀÆ÷ĬÈÏÐÐΪ evt.preventDefault(); moveP.x = evt.targetTouches[0].pageX; moveP.y = evt.targetTouches[0].pageY; } // console.log(self.dire) if(self.dire === 'horizon'){ if(Math.abs(moveP.x-self.startX) > Math.abs(moveP.y - self.startY)){ // move horizontal self.offsetX = moveP.x - self.startX; if(self.offsetX > 550){self.offsetX = 300;} if(self.offsetX < 0){ // change transform style with offsetX console.log('enter right 2 left') // console.log('curr offset X ' + self.offsetX) self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(' + self.offsetX + 'px, 0, 0)'); } else{ console.log( ' enter left 2 right '+ self.offsetX) if (self.wrap.style.webkitTransform >= 0) { self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(0px,0,0)'); // self.addtion.style.webkitTransform = ('translate3d(0px,0,0)'); }; self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(' + (self.offsetX)+ 'px, 0, 0)'); } } } else if(self.dire === 'vertical'){ if(Math.abs(moveP.x-self.startX) < Math.abs(moveP.y - self.startY)){ // move horizontal self.offsetY = moveP.y - self.startY; if(self.offsetY < 0){ // change transform style with offsetX // console.log('curr offset Y ' + self.offsetY) console.log('down to up') self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(0px,'+ self.offsetY +'px,0)'); self.addtion.style.webkitTransform = ('translate3d(0px,'+ self.offsetY +'px,0)'); }else{ console.log('up to down') var fixed_body = document.getElementById('fixed-body'); if(fixed_body.style.webkitTransform.indexOf('-') > 0){ self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(0px,0,0)'); self.addtion.style.webkitTransform = ('translate3d(0px,0,0)'); } } } } document.getElementById('swipe_table_title').style.position = 'fixed !important'; document.getElementById('fixed_table_title').style.position = 'fixed !important'; console.log(moveP.x) }; new Slider({ dom : document.getElementById('swipe_table'), direction : 'horizon' }); new Slider({ dom : document.getElementById('fixed-body'), direction : 'vertical', addtion : document.getElementById('swiper-body') }); new Slider({ dom : document.getElementById('swiper-body'), direction : 'vertical', addtion : document.getElementById('fixed-body') });
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆 (2)
刘奇

你可以用手机效果touchslide.js,网址http://www.superslide2.com/,有用法,不行的话你就zepto.js,这个是针对手机端的。

    阿神

    如果是ionic的话,可以用这个指令`
    var slidingTabsDirective = angular.module("ionic").directive('ionSlideTabs', ['$timeout', '$compile', '$interval', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', '$ionicGesture', function($timeout, $compile, $interval, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicGesture) {

    return { require: "^ionSlideBox", restrict: 'A', link: function(scope, element, attrs, parent) { var ionicSlideBoxDelegate; var ionicScrollDelegate; var ionicScrollDelegateID; var slideTabs; var indicator; var slider; var tabsBar; var options = { "slideTabsScrollable": true }
    var init = function () { if(angular.isDefined( attrs.slideTabsScrollable ) && attrs.slideTabsScrollable === "false" ) { options.slideTabsScrollable = false; } var tabItems = '
  • '; if(options.slideTabsScrollable) { ionicScrollDelegateID = "ion-slide-tabs-handle-" + Math.floor((Math.random() * 10000) + 1); tabsBar = angular.element('
      ' + tabItems + '

    '); } else { tabsBar = angular.element('

      ' + tabItems + '

    '); }
    slider = angular.element(element); var compiled = $compile(tabsBar); slider.parent().prepend(tabsBar); compiled(scope); //get Tabs DOM Elements indicator = angular.element(tabsBar[0].querySelector(".tab-indicator")); //get the slideBoxHandle var slideHandle = slider.attr('delegate-handle'); var scrollHandle = tabsBar.attr('delegate-handle'); ionicSlideBoxDelegate = $ionicSlideBoxDelegate; if (slideHandle) { ionicSlideBoxDelegate = ionicSlideBoxDelegate.$getByHandle(slideHandle); }
    if(options.slideTabsScrollable) { ionicScrollDelegate = $ionicScrollDelegate; if (scrollHandle) { ionicScrollDelegate = ionicScrollDelegate.$getByHandle(scrollHandle); } }
    addEvents(); setTabBarWidth(); slideToCurrentPosition(); }; var addEvents = function() { ionic.onGesture("dragleft", scope.onSlideMove ,slider[0]); ionic.onGesture("dragright", scope.onSlideMove ,slider[0]); ionic.onGesture("release", scope.onSlideChange ,slider[0]); } var setTabBarWidth = function() { if( !angular.isDefined(slideTabs) || slideTabs.length == 0 ) { return false; } tabsList = tabsBar.find("ul"); var tabsWidth = 0; angular.forEach(slideTabs, function (currentElement,index) { var currentLi = angular.element(currentElement); tabsWidth += currentLi[0].offsetWidth; }); if(options.slideTabsScrollable) { angular.element(tabsBar[0].querySelector(".scroll")).css("width", tabsWidth + 1 + "px"); } else { slideTabs.css("width",tabsList[0].offsetWidth / slideTabs.length + "px"); } slideToCurrentPosition(); }; var addTabTouchAnimation = function(event,currentElement) { var ink = angular.element(currentElement[0].querySelector(".ink")); if( !angular.isDefined(ink) || ink.length == 0 ) { ink = angular.element(""); currentElement.prepend(ink); }
    ink.removeClass("animate"); if(!ink.offsetHeight && !ink.offsetWidth) { d = Math.max(currentElement[0].offsetWidth, currentElement[0].offsetHeight); ink.css("height", d + "px"); ink.css("width", d + "px"); } x = event.offsetX - ink[0].offsetWidth / 2; y = event.offsetY - ink[0].offsetHeight / 2;
    ink.css("top", y +'px'); ink.css("left", x +'px'); ink.addClass("animate"); } var slideToCurrentPosition = function() { if( !angular.isDefined(slideTabs) || slideTabs.length == 0 ) { return false; } var targetSlideIndex = ionicSlideBoxDelegate.currentIndex(); var targetTab = angular.element(slideTabs[targetSlideIndex]); var targetLeftOffset = targetTab.prop("offsetLeft"); var targetWidth = targetTab[0].offsetWidth;
    indicator.css({ "-webkit-transition-duration": "300ms", "-webkit-transform":"translate(" + targetLeftOffset + "px,0px)", "width": targetWidth + "px" }); if (options.slideTabsScrollable && ionicScrollDelegate) { var scrollOffset = 40; ionicScrollDelegate.scrollTo(targetLeftOffset - scrollOffset,0,true); } slideTabs.removeClass("tab-active"); targetTab.addClass("tab-active"); }
    var setIndicatorPosition = function (currentSlideIndex, targetSlideIndex, position, slideDirection) { var targetTab = angular.element(slideTabs[targetSlideIndex]); var currentTab = angular.element(slideTabs[currentSlideIndex]); var targetLeftOffset = targetTab.prop("offsetLeft"); var currentLeftOffset = currentTab.prop("offsetLeft"); var offsetLeftDiff = Math.abs(targetLeftOffset - currentLeftOffset);
    if( currentSlideIndex == 0 && targetSlideIndex == ionicSlideBoxDelegate.slidesCount() - 1 && slideDirection == "right" || targetSlideIndex == 0 && currentSlideIndex == ionicSlideBoxDelegate.slidesCount() - 1 && slideDirection == "left" ) { return; } var targetWidth = targetTab[0].offsetWidth; var currentWidth = currentTab[0].offsetWidth; var widthDiff = targetWidth - currentWidth; var indicatorPos = 0; var indicatorWidth = 0; if (currentSlideIndex > targetSlideIndex) { indicatorPos = targetLeftOffset - (offsetLeftDiff * (position - 1)); indicatorWidth = targetWidth - ((widthDiff * (1 - position))); } else if (targetSlideIndex > currentSlideIndex) { indicatorPos = targetLeftOffset + (offsetLeftDiff * (position - 1)); indicatorWidth = targetWidth + ((widthDiff * (position - 1))); }
    indicator.css({ "-webkit-transition-duration":"0ms", "-webkit-transform":"translate(" + indicatorPos + "px,0px)", "width": indicatorWidth + "px" });
    if (options.slideTabsScrollable && ionicScrollDelegate) { var scrollOffset = 40; ionicScrollDelegate.scrollTo(indicatorPos - scrollOffset,0,false); } } scope.onTabTabbed = function(event, index) { addTabTouchAnimation(event, angular.element(event.currentTarget) ); ionicSlideBoxDelegate.slide(index); slideToCurrentPosition(); } scope.tabs = []; scope.addTabContent = function ($content) { scope.tabs.push($content); scope.$apply(); $timeout(function() { slideTabs = angular.element(tabsBar[0].querySelector("ul").querySelectorAll(".slider-slide-tab")); slideToCurrentPosition(); setTabBarWidth() }) } scope.onSlideChange = function (slideIndex) { slideToCurrentPosition(); }; scope.onSlideMove = function () { var scrollp = slider[0].getElementsByClassName("slider-slide"); var currentSlideIndex = ionicSlideBoxDelegate.currentIndex(); var currentSlide = angular.element(scrollp[currentSlideIndex]); var currentSlideLeftOffset = currentSlide.css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',')[0]; var targetSlideIndex = (currentSlideIndex + 1) % scrollp.length; if (currentSlideLeftOffset > slider.prop("offsetLeft")) { targetSlideIndex = currentSlideIndex - 1; if (targetSlideIndex < 0) { targetSlideIndex = scrollp.length - 1; } } var targetSlide = angular.element(scrollp[targetSlideIndex]); var position = currentSlideLeftOffset / slider[0].offsetWidth; var slideDirection = position > 0 ? "right":"left"; position = Math.abs(position); setIndicatorPosition(currentSlideIndex, targetSlideIndex, position, slideDirection); }; init(); }, controller: ['$scope',function($scope) { this.addTab = function($content) { $timeout(function() { if($scope.addTabContent) { $scope.addTabContent($content); } }); } }] };

    }]);

    slidingTabsDirective.directive('ionSlideTabLabel', [ function() {

    return { require: "^ionSlideTabs", link: function ($scope, $element, $attrs, $parent) { $parent.addTab($attrs.ionSlideTabLabel); } }

    }]);
    `

      最新下載
      更多>
      網站特效
      網站源碼
      網站素材
      前端模板
      關於我們 免責聲明 Sitemap
      PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!