Das jQuery-Plug-in multiScroll ermöglicht das Scrollen mit der Maus im Vollbildmodus und die Spezialeffekte

Das jQuery-Plug-in multiScroll ermöglicht das Scrollen mit der Maus im Vollbildmodus und die Spezialeffekte_jquery

WBOY

Freigeben： 2016-05-16 16:04:42

Original

1104 Leute haben es durchsucht

Auf einigen Produkteinführungsseiten sehe ich oft Vollbild-Scroll-Spezialeffekte. Heute empfehle ich jedem ein jQuery-Plug-In für Vollbild-Maus-Scroll-Seiten-Spezialeffekte, das viele benutzerdefinierte Parameter unterstützt Konfigurationen scrollingSpeed: Umschaltgeschwindigkeit, Easing: Animationseffekt, Navigation: false, ob die Navigation angezeigt wird, und unterstützt auch Event-Callback-Funktionsaufrufe, onLeave, afterLoad usw., der Effekt ist immer noch gut, Browserkompatibilität: IE8, 9, Opera 12, und moderne Browser. Der Browser muss CSS3-Eigenschaften unterstützen, und es wird empfohlen, diese zu erlernen und zu verwenden.

Verwendung:

1. Plug-Ins und jQuery laden

<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" /> 
<script src="libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="vendors/jquery.easings.min.js"></script>  
<script type="text/javascript" src="jquery.multiscroll.js"></script>

Nach dem Login kopieren

2.HTML-Inhalt

<div id="multiscroll"> 
  <div class="ms-left"> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
  </div> 
  <div class="ms-right"> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
  </div> 
</div>

Nach dem Login kopieren

3. Funktionsaufruf

<script type="text/javascript"> 
$(document).ready(function() { 
  $('#multiscroll').multiscroll{ 
    verticalCentered : true, 
    scrollingSpeed: 700, 
    easing: 'easeInQuart', 
    menu: false, 
    sectionsColor: [], 
    navigation: false, 
    navigationPosition: 'right', 
    navigationColor: '#000', 
    navigationTooltips: [], 
    loopBottom: false, 
    loopTop: false, 
    css3: false, 
    paddingTop: 0, 
    paddingBottom: 0, 
    normalScrollElements: null, 
    keyboardScrolling: true, 
    touchSensitivity: 5, 
 
    //events 
    onLeave: function(index, nextIndex, direction){}, 
    afterLoad: function(anchorLink, index){}, 
    afterRender: function(){}, 
    afterResize: function(){}, 
  }); 
}); 
</sript>

Nach dem Login kopieren

DEMO ansehen Skript-Download

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.