JS mouse click picture switch effect to achieve code _JAVASCRIPT skills

The example of this article describes the JS mouse click picture switch effect Implementation code. Share to everyone for your reference. Specifically as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

HTML code:

<div id= "Menuwrapper" class= "Menuwrapper bg1" > <ul class= "Menu" id= "menu" > <li class= "bg1" style= "back ground-position:0 0; " > <a id= "bg1" href= "#" > Mary Bao </a> <ul class= "sub1" style= "background-position:0" 0; " > <li><a href= "#" > Quotes: 11.99-236,900 </a></li> <li><a href= "#" > Body structure: three cases </a ></li> <li><a href= "#" > Fuel consumption:8.3-12.0l</a></li> </ul> </li> <li class = "Bg1" style= "background-position:-266px 0px;" > <a id= "Bg2" href= "#" > Sonata 8</a> <ul class= "sub2" style= "background-position:-266px 0;" > <li><a href= "#" > Quotes: 13.39-225,900 </a></li> <li><a href= "#" > Body structure: three cases </a ></li> <li><a href= "#" > Fuel consumption:9.0-12.0l</a></li> </ul> </li> <li class = "Last Bg1" style= "background-position:-532px 0px;" > <a id= "Bg3" href= "#" >K5</a> <ul class= "Sub3" style= "BACKGROUND-POSITION:-266PX 0; " > <li><a href= "#" > Quotes: 10.88-255800 </a></li> <li><a href= "#" > Body structure: three cases </a
  ></li> <li><a href= "#" > Fuel consumption:8.4-13.0l</a></li> </ul> </li> </ul> </div>

CSS code:

 Ul.menu > li > A{float:left;
 width:265px;
 height:50px;
 margin-top:450px;
 Text-align:center;
 line-height:50px;
 Color: #ddd;
 Background-color: #333;
 letter-spacing:1px;
 Cursor:pointer;
 Text-decoration:none;
text-shadow:0px 0px 1px #fff;
 } ul.menu > Li ul{list-style:none;
 Float:left;
 margin-top:-180px;
 width:100%;
 height:110px;
 padding-top:20px;
 Background-repeat:no-repeat;
Background-color:transparent;
 } ul.menu > Li ul li{display:none; Ul.menu > Li ul.sub1 {background-image:url ('.
 /img/bg1sub.png '); } ul.menu > Li ul.sub2 {background-image:url ('.
 /img/bg2sub.png '); } ul.menu > Li ul.sub3{background-image:url (..
/img/bg3sub.png);
 Ul.menu > Li ul li a{color: #fff;
 Text-decoration:none;
 line-height:30px;
 margin-left:20px;
 text-shadow:1px 1px 1px #444;
font-size:11px; } ul.menu > Li ul li a:hover{border-bottom:1px dotted #fff; Ul.menu > Li ul.sub1 li{;} 

JS code:

if (!document.defaultview | |!document.defaultview.getcomputedstyle) {//ie6-ie8 var oldcurcss = JQuery.curCSS;
   Jquery.curcss = function (elem, name, Force) {if (name = = = ' Background-position ') {name = ' backgroundposition '; } if (name!== ' backgroundposition ' | | |!elem.currentstyle | | elem.currentstyle[name]) {return oldcurcss.apply (th
   is, arguments);
   var style = Elem.style;
   if (!force && style && Style[name]) {return style[name];
  Return Oldcurcss (Elem, ' backgroundPositionX ', force) + ' + oldcurcss (elem, ' backgroundpositiony ', force);
 };
 var oldanim = $.fn.animate; $.fn.animate = function (prop) {if (' background-position ' in prop) {prop.backgroundposition = prop[' Background-posi
   tion '];
  Delete prop[' background-position '];
  } if (' backgroundposition ' in prop) {prop.backgroundposition = ' (' + prop.backgroundposition;
 Return to Oldanim.apply (this, arguments);
 }; function ToArray (STRG) {STRG =Strg.replace (/left|top/g, ' 0px ');
  STRG = Strg.replace (/right|bottom/g, ' 100% '); STRG = Strg.replace (/([0-9\.]
  +) (\s|\) |$)/g, "$1px$2"); var res = Strg.match (/(-?[ 0-9\.] +) (px|\%|em|pt) \s (-?[ 0-9\.]
  +) (px|\%|em|pt)/);
 return [Parsefloat (Res[1], res[2], parsefloat (Res[3], ten), Res[4]]; }

The above is a JS mouse click on the image switch effect of the main code, I hope that the mouse click on the implementation of the picture switch effect.