Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage