15 jquery Code snippets that can be used directly.

jquery provides many ways to create interactive Web sites, and developers should take advantage of jquery code when developing Web projects that not only bring a variety of animations and effects to the site, but also improve the user experience of the site.

This article collects 15 useful pieces of jquery code that you can copy and paste directly into the code, but ask the developer to understand the code and use it again. Let's enjoy the charm of the jquery code here.

1. Pre-loading pictures

1 2 3 4 5 6 7 8 9 10 11 12

(function ($) {var cache = [];    Arguments is image paths relative to the current page.      $.preloadimages = function () {var args_len = arguments.length; for (var i = Args_len; i--;)        {var cacheimage = document.createelement (' img ');        CACHEIMAGE.SRC = Arguments[i];      Cache.push (Cacheimage); }} jquery.preloadimages ("Image1.gif", "/path/to/image2.png");

Source

2. Make each element in the page suitable for display on mobile devices

1 2 3 4 5 6 7 8 9 10 11

var scr = document.createelement (' script '); Scr.setattribute (' src ', ' https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js '); Document.body.appendChild (SCR); Scr.onload = function () {$ (' div '). attr (' class ', '). attr (' id ', '). css ({' margin ': 0, ' PA Dding ': 0, ' width ': ' 100% ', ' Clear ': ' both '}; };

Source

3. Proportional scaling of images

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

$ (window). Bind ("Load", function () {    //IMAGE RESIZE      $ (' #product_cat _list img '). each (function () {         var maxWidth = +;    & nbsp;     var maxheight = 120;          var ratio = 0;          var width = $ (this). width ();          var height = $ (this). Height ();          if (width > maxWidth) {              ratio = Maxwidth/width;              $ (this). CSS ("width", maxWidth);              $ (this). CSS ("height", height * ratio);              height = Height * ratio;         }          var width = $ ( This). width ();          var height = $ (this). Height ();          if (height > maxheight) {              ratio = Maxheight/height;              $ (this). CSS ("height", maxheight);              $ (this). CSS ("width", width * ratio);              width = width * ratio;         }     });     //$ ("#contentpage img"). Show ();     //IMAGE RESIZE});

Source

4. Go back to the top of the page

1 2 3 4 5 6 7 8

Back to Top $ (document). Ready (function () {$ ('. Top '). Click (function () {$ (document). ScrollTo (0,500); }); }); Create a link defined with the class top <a href= "#" class= "Top" >back to Top</a>

Source

5. Use jquery to create accordion-style folding effects

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var accordion = {      init:function () {        & nbsp;   var $container = $ (' #accordion ');             $container. Find (' Li:not (: first). Details '). Hide ();             $container. Find (' Li:first '). AddClass (' Active ');             $container. On (' Click ', ' Li a ', function (e) {                    E.preventdefault ();                    var $ this = $ (this). Parents (' Li ');                    if ($ this. Hasclass (' active ')) {                          if ($ ('. Details '). Is (': Visible ')) {                                  $ this. Find ('. Details '). Slideup ();                           } else {                                   $ this. Find ('. Details '). Slidedown ();                           }                    } else {                           $container. Find (' li.active. Details '). Slideup ();                            $container. Find (' Li '