<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>New</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
.nav {
list-style: none;
}
.nav li {
float: left;
}
.nav li a {
background: url('vohz9zmhrnjq.png') 0 0;
display: block;
width: 90px;
height: 45px;
}
</style>
<script type="text/javascript">
/**
* @author Alexander Farkas
* @link http://snook.ca/archives/javascript/jquery-bg-image-animations/
* @license ?
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
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],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
$(document).ready(function () {
$('.nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0px -50px)"},
{duration:300})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{
duration:300,
complete:function(){
$(this).css({backgroundPosition: "0 0"})
}
}
)
});
});
</script>
</head>
<body>
<ul class="nav">
<li><a href="./"></a></li>
<li><a href="./"></a></li>
<li><a href="./"></a></li>
<li><a href="./"></a></li>
</ul>
</body>
</html>
