jQuery Background Positionからjquery.bgpos.js
jQueryからjquery.jsをダウロードする。
画像を用意する。
basic.css
#bgpos h2 {
clear:both;
padding-top:20px;
}
#bgpos ul {
list-style:none;
margin:0;
padding:0;
}
#bgpos ul:after{
content:"";
display:block;
clear:both;
}
#bgpos li {
float:left;
height:30px;
line-height:30px;
width:120px;
margin:0;
padding:0;
text-align:center;
}
#bgpos li a {
display:block;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}
#bgpos li a {
background:url(bg2.jpg) repeat 0 0;
}
#bgpos li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}
#bgpos #a a {
background:url(bg.jpg) repeat -20px 35px;
}
#bgpos #b a {
background:url(bg2.jpg) repeat 0 0;
}
#bgpos #c a {
background:url(bg3.jpg) repeat 0 0;
}
#bgpos #d a {
background:url(bg4.jpg) repeat 0 0;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="./jQuery_1.7.1.js"></script>
<script type="text/javascript" src="./jquery.bgpos.js"></script>
<link rel="stylesheet" type="text/css" href="./basic.css" />
<script type="text/javascript">
$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#b a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#c a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#d a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
</script>
[/java]
1
</head>
<body>
<div id="bgpos">
<h2 id="h2_8">Example A: Top down</h2>
<ul id="a">
<li><a style="background-position: -20px 35px;" href="#">Home</a></li>
<li><a style="background-position: -20px 35px;" href="#">About</a></li>
<li><a style="background-position: -20px 35px;" href="#">Contact</a></li>
</ul>
<h2 id="h2_9">Example B: Right left</h2>
<ul id="b">
<li><a style="background-position: 0pt 0pt;" href="#">Home</a></li>
<li><a style="background-position: 0pt 0pt;" href="#">About</a></li>
<li><a style="background-position: 0pt 0pt;" href="#">Contact</a></li>
</ul>
<h2 id="h2_10">Example C: Fade 1-colour</h2>
<ul id="c">
<li><a style="background-position: 0pt 0pt;" href="#">Home</a></li>
<li><a style="background-position: 0pt 0pt;" href="#">About</a></li>
<li><a style="background-position: 0pt 0pt;" href="#">Contact</a></li>
</ul>
<h2 id="h2_11">Example D: Fade 2-colour</h2>
<ul id="d">
<li><a style="background-position: 0pt 0pt;" href="#">Home</a></li>
<li><a style="background-position: 0pt 0pt;" href="#">About</a></li>
<li><a style="background-position: 0pt 0pt;" href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
jquery.bgpos.js
/**
* @author Alexander Farkas
* 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);
ただし、jQuery Background Positionからダウンロードしたjquery.bgpos.jsはIE8ではエラーになるので、次の様に修正
(function($)
{
$.extend($.fx.step,
{
backgroundPosition: function(fx)
{
if (fx.state === 0 && typeof fx.end == 'string')
{
if(navigator.appName == 'Microsoft Internet Explorer')
{
var start = $.curCSS(fx.elem,'backgroundPositionX');
start += ' ';
start += $.curCSS(fx.elem,'backgroundPositionY');
}
else
{
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);
