Recommend 10 great JQuery special effects code _jquery

1. Picture Pre-loading

(function ($) {
 var cache = [];
 Arguments are 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");

2. Open the link in the new window (target= "blank")

$ (' a[@rel $= ' External ']. Click (function () {
   this.target = "_blank";
});
  /* Usage:
  <a href= "http://www.catswhocode.com" rel= "external" >catswhocode.com</a>
*

3. Add class for body when JavaScript is supported

/* The code is only 1 lines, but the simplest way to detect if the browser supports JavaScript is to add a Hasjs class to the BODY element if it supports JavaScript.

$ (' body '). addclass (' Hasjs ');

4. Smooth scrolling page to an anchor point

$ (document). Ready (function () {
  $ ("A.toplink"). Click (function () {
    $ (HTML, body). Animate ({
      scrolltop: $ ($ (this). attr ("href")). Offset (). Top + "px"
    }, {
      duration:500,
      easing: "Swing"
    });
    return false;
  });

5. Fade and Fade when the mouse is sliding

$ (document). Ready (function () {
  $ (". Thumbs img"). Fadeto ("slow", 0.6); 
This is sets the opacity of the thumbs to fade down to 60% when the page loads
 
  $ (". Thumbs img"). Hover (function () {
    $ (this). Fadeto ("Slow", 1.0); 
This should set is opacity to 100% on hover
  },function () {
    $ (this). Fadeto ("slow", 0.6); 
This is should set the opacity back to 60% on Mouseout
  })
;

6. Production of high-level columns

var max_height = 0;
$ ("Div.col"). each (the function () {
  if ($ (this). Height () > max_height) {max_height = $ (this). Height ();}
});
$ ("Div.col"). Height (max_height);

7. Enable HTML5 support on some old browsers

(function () {
  if (!/* @cc_on!@*/0) return
    ;
  var e = "Abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header, Hgroup,mark,menu,meter,nav,output,progress,section,time,video ". Split (', '), I=e.length;while (i--) { Document.createelement (E[i])}
}) ()
 

The JS is then introduced into the head
<!--[If Lt IE 9]>
<script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
8. Test whether the browser supports certain CSS3 properties

var supports = (function () {
  var div = document.createelement (' div '),
   vendors = ' khtml Ms O Moz Webkit '. Split (") ,
   len = vendors.length;
 
  return function (prop) {
   if (prop into Div.style) return true;
 
   Prop = Prop.replace (/^[a-z]/, function (val) {return
     val.touppercase ();
   });
 
   while (len--) {
     if (Vendors[len] + prop in Div.style) {
      //browser supports. Do what your need.
      Or use a bang (!) to test if the browser doesn ' t.
      return true;
     }
   return false;}
) ();
 
if (Supports (' Textshadow ')) {
  Document.documentElement.className + = ' Textshadow ';

9. Get the parameters passed in the URL

$.urlparam = function (name) {
  var results = new RegExp (' [\\?&] ' + name + ' = ([^&#]*) '). EXEC ( WINDOW.LOCATION.HREF);
  if (!results) {return 0;}
  return Results[1] | | 0;
}

10. Disable the form's enter key submission

$ ("#form"). KeyPress (function (e) {
 if (E.which =) {return
  false;
 }
});