Le plug-in jQuery multiScroll réalise des effets spéciaux de changement de page de défilement de la souris en plein écran

Le plug-in jQuery multiScroll réalise des effets spéciaux de changement de page de défilement de la souris en plein écran_jquery

WBOY

Libérer： 2016-05-16 16:04:42

original

1106 Les gens l'ont consulté

Je vois souvent des effets spéciaux de défilement en plein écran sur certaines pages d'introduction de produits. Aujourd'hui, je recommande un plug-in jQuery à tout le monde. Le plug-in d'effets spéciaux de changement de page de défilement de souris en plein écran jQuery multiScroll.js prend en charge de nombreux paramètres personnalisés. configurations scrollingSpeed : vitesse de commutation, easing : effet d'animation, navigation : false si la navigation apparaît, et prend également en charge les appels de fonction de rappel d'événement, onLeave, afterLoad, etc., l'effet est toujours bon, compatibilité des navigateurs : IE8, 9, Opera 12, et les navigateurs modernes, le navigateur doit prendre en charge les propriétés CSS3 et il est recommandé de l'apprendre et de l'utiliser.

Utilisation :

1. Charger les plug-ins et jQuery

<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>

Copier après la connexion

2.Contenu HTML

<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>

Copier après la connexion

3. Appel de fonction

<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>

Copier après la connexion

Voir la DÉMO Téléchargement du script

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.