JQuery implements a full-screen scrolling album instance with scroll navigation Effect

JQuery implements a full-screen scrolling album instance with scroll navigation Effect

This example describes how jQuery implements full-screen scrolling album with scrolling navigation effect. Share it with you for your reference. The details are as follows:

Run the following command:

The main code is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

$ (Function (){ // The uploaded Image Var $ loader = $ ('# st_loading '); // Obtain the ul element. Var $ list = $ ('# st_nav '); // The currently displayed Image Var $ currImage = $ ('# st_main'). children ('img: first '); // Load the current image // Display navigation items at the same time $ (''). load (function (){ $ Loader. hide (); $ CurrImage. fadeIn (3000 ); // Slide-out navigation SetTimeout (function (){ $ List. animate ({'left': '0px '}, 500 ); }, 1000 ); }). Attr ('src', $ currImage. attr ('src ')); // Calculate the width of the div element where the displayed thumbnail is located. BuildThumbs (); Function buildThumbs (){ $ List. children ('Li. album '). each (function (){ Var $ elem = $ (this ); Var $ thumbs_wrapper = $ elem. find ('. st_thumbs_wrapper '); Var $ thumbs = $ thumbs_wrapper.children (': first '); // Each thumbnail occupies a width of 180 pixels and a 3-pixel interval (margin) Var finalW = $ thumbs. find ('img '). length * 183; Define thumbs.css ('width', finalW + 'px '); // This element is rolling MakeScrollable ($ thumbs_wrapper, $ thumbs ); }); } // When you click a menu item (switch up and down) // Make the div layer of the thumbnail show and hide the current // Open the menu (if any) $ List. find ('. st_arrow_down'). live ('click', function (){ Var $ this = $ (this ); HideThumbs (); $ This. addClass ('st _ arrow_up '). removeClass ('st _ arrow_down '); Var $ elem = $ this. closest ('lil '); $ Elem. addClass ('current'). animate ({'height': '170px '}, 200 ); Var $ thumbs_wrapper = $ this. parent (). next (); $ Thumbs_wrapper.show (200 ); }); $ List. find ('. st_arrow_up'). live ('click', function (){ Var $ this = $ (this ); $ This. addClass ('st _ arrow_down '). removeClass ('st _ arrow_up '); HideThumbs (); }); // Click scale down to change the image size $ List. find ('. st_thumbs img'). bind ('click', function (){ Var $ this = $ (this ); $ Loader. show (); $ (''). load (function (){ Var $ this = $ (this ); Var $ currImage = $ ('# st_main'). children ('img: first '); $ This. insertBefore ($ currImage ); $ Loader. hide (); $ CurrImage. fadeOut (2000, function (){ $ (This). remove (); }); }). Attr ('src', $ this. attr ('alt ')); }). Bind ('mouseenter', function (){ $ (This). stop (). animate ({'opacity ': '1 '}); }). Bind ('mouseleave ', function (){ $ (This). stop (). animate ({'opacity ': '0. 7 '}); }); // Hide the function of the currently opened menu Function hideThumbs (){ $ List. find ('Li. current ') . Animate ({'height': '50px '}, 400, function (){ $ (This). removeClass ('stream '); }) . Find ('. st_thumbs_wrapper ') . Hide (200) . AndSelf () . Find ('. st_link span ') . AddClass ('st _ arrow_down ') . RemoveClass ('st _ arrow_up '); } // Is the current thumbnail div layer scrolling // Scroll automatically when the mouse moves to the menu Layer Function makeScrollable ($ outer, $ inner ){ Var extra = 800; // Obtain the menu width Var divWidth = $ outer. width (); // Remove the scroll bar $Outer.css ({ Overflow: 'hiden' }); // Search for the last image on the container Var lastElem = $ inner. find ('img: lala '); $ Outer. scrollLeft (0 ); // When the user leaves the menu $ Outer. unbind ('mousemove '). bind ('mousemove', function (e ){ Var containerWidth = lastElem [0]. offsetLeft + lastElem. outerWidth () + 2 * extra; Var left = (e. pageX-$ outer. offset (). left) * (containerWidth-divWidth)/divWidth-extra; $ Outer. scrollLeft (left ); }); } });

I hope this article will help you with jQuery programming.