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>
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>
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>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.