jQuery Background Position
Background Effekte bei Buttons
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>jQuery Background Test</title>
<style>
h2 {clear:both;padding-top:20px;}
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;margin:0;padding:0;text-align:center;}
li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
li a {background:url(https://snook.ca/technical/jquery-bg/bg2.jpg) repeat 0 0;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}
#a a {background:url(https://snook.ca/technical/jquery-bg/bg.jpg) repeat -20px 35px;}
#b a {background:url(https://snook.ca/technical/jquery-bg/bg2.jpg) repeat 0 0;}
#c a {background:url(https://snook.ca/technical/jquery-bg/bg3.jpg) repeat 0 0;}
#d a {background:url(https://snook.ca/technical/jquery-bg/bg4.jpg) repeat 0 0;}
</style>
<script src="https://snook.ca/technical/jquery-bg/jquery-1.2.6.min.js"></script>
<script>
(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];