JQuery implements full-screen scrolling album with scroll navigation effect _ jquery

This article mainly introduces jQuery's full-screen scrolling album with scrolling navigation effect, and involves jQuery's related operation skills on page image elements and mouse events, for more information about jQuery, see the following example. Share it with you for your reference. The details are as follows:

Run the following command:

The main code is as follows:

$ (Function () {// The image var $ loader =$ ('# st_loading') when loading '); // obtain the ul element var $ list =$ ('# st_nav'); // The currently displayed image var $ currImage =$ ('# st_main '). children ('img: first '); // loads the current image // displays the navigation item $ (''). 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 p element in which the thumbnail is to be displayed. 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 margin (margin) var finalW = $ thumbs. find ('img '). length * 183366%thumbs.css ('width', finalW + 'px'); // This element has a rolling makeScrollable ($ thumbs_wrapper, $ thumbs );});} // when you click a menu item (switch up and down) // display and hide the current p-layer of the thumbnail. // 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 the thumbnail to change the larger image $ 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 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 ');} // The current thumbnail p-layer scrolling // when the mouse moves to the menu layer, the function makeScrollable ($ outer, $ inner) is automatically rolled {var extra = 800; // obtain the menu width var pWidth = $ outer. width (); // remove the scroll bar incluouter.css ({overflow: 'den den '}); // find the last image on the container var lastElem = $ inner. find ('img: last'); $ outer. scrollLeft (0); // $ outer when the user mouse leaves the menu. unbind ('mousemove '). bind ('mousemove ', function (e) {var containerWidth = lastElem [0]. offsetLeft + lastElem. outerWidth () + 2 * extra; var left = (e. pageX-$ outer. offset (). left) * (containerWidth-pWidth)/pWidth-extra; $ outer. scrollLeft (left );});}});

I hope this article will help you with jQuery programming.