Плавное смещение background
Скажите пожалуйста, как реализовать такое. У body есть background, нужно сделать так что при движении мыши по документу слева направо задний фон смещался справа налево и наоборот. Но если мышь покидает область окна то задний фон плавно восстанавливает свое местоположение по центру. Спасибо.
|
Меняйте свойство background-position.
|
Пара вопросов для знатоков: как получить значение background-position в jQuery ?
например:
$(document.body).css('backgroundPosition')
кросбраузерно и как анимировать проще
$(document.body).animate({backgroundPosition: "60% 80%"})
А пока вариант не слишком компактный )))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
body{
background: url(http://commondatastorage.googleapis.com/static.panoramio.com/photos/original/28749777.jpg);
background-position: 60% 80%;
background-attachment: fixed;
min-height: 100%;
min-width: 100%;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="show" style="position: fixed">60% 80%</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
(function (c) {
function g(a) {
a = a.replace(/left|top/g, "0px");
a = a.replace(/right|bottom/g, "100%");
a = a.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
a = a.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(a[1], 10), a[2], parseFloat(a[3], 10), a[4]]
}
if (!document.defaultView || !document.defaultView.getComputedStyle) {
var d = jQuery.curCSS;
jQuery.curCSS = function (a, b, e) {
if (b === "background-position") b = "backgroundPosition";
if (b !== "backgroundPosition" || !a.currentStyle || a.currentStyle[b]) return d.apply(this, arguments);
var f = a.style;
if (!e && f && f[b]) return f[b];
return d(a, "backgroundPositionX", e) + " " + d(a, "backgroundPositionY", e)
}
}
var h = c.fn.animate;
c.fn.animate = function (a) {
if ("background-position" in a) {
a.backgroundPosition = a["background-position"];
delete a["background-position"]
}
if ("backgroundPosition" in a) a.backgroundPosition = "(" + a.backgroundPosition;
return h.apply(this, arguments)
};
c.fx.step.backgroundPosition = function (a) {
if (!a.bgPosReady) {
var b = c.curCSS(a.elem, "backgroundPosition");
b || (b = "0px 0px");
b = g(b);
a.start = [b[0], b[2]];
b = g(a.options.curAnim.backgroundPosition);
a.end = [b[0], b[2]];
a.unit = [b[1], b[3]];
a.bgPosReady = true
}
b = [];
b[0] = (a.end[0] - a.start[0]) * a.pos + a.start[0] + a.unit[0];
b[1] = (a.end[1] - a.start[1]) * a.pos + a.start[1] + a.unit[1];
a.elem.style.backgroundPosition = b[0] + " " + b[1]
}
})(jQuery);
</script>
<script type="text/javascript">
$(function () {
function d() {
$(document.body).stop();
$(document.body).animate({
backgroundPosition: "60% 80%"
}, 2E3, function () {
$("#show").html("60% 80%")
})
}
$(document).mousemove(function (a) {
$(document.body).stop();
var b = $(window).width(),
c = $(window).height();
b = Math.ceil((a.pageX - $(document).scrollLeft()) * 100 / b);
a = Math.ceil((a.pageY - $(document).scrollTop()) * 100 / c);
b > 100 && (b = 100) && d();
a > 100 && (a = 100) && d();
c = b + "% " + a + "% ";
$("#show").html(c);
b < 100 && a < 100 && $(document.body).css({
backgroundPosition: c
})
});
$(document).mouseout(d)
});
</script>
</body>
</html>
|
$(document.body).css('background-position');
в $ все свойства читаются как пишутся ))) http://api.jquery.com/animate/ Например так - background-position будет плавно (в течении 500 мсек) изменен с текущего значения до 80%
$(document.body).animate({'background-position': "80%"}, 500);
|
Цитата:
Цитата:
Цитата:
и других браузерах.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script language="JavaScript" type="text/javascript">
$(function () {
alert($(document.body).css('background-position'));
alert($(document.body).css('backgroundPosition'));
})
</script>
</head>
<body>
</body>
</html>
P.S Если бы было всё так просто то не писались бы плагины для backgroundPosition в jquery |
| Часовой пояс GMT +3, время: 11:14. |