вопрос
Есть сайт, на котором установлен блок с картинкой (вроде слайдера) с эффектом паралакс. Картинка 1500px, блок 1200px. В данный момент при наведении на область картинки и при его перемещении картинка сдвигается в право или в лево соответственно (так запланировано). Собственно вопрос заключается в том, как сделать так, чтобы после удаления курсора от области картинки, она возвращалась в первоначальное положение? Сейчас же когда удаляешь курсор картинка остаётся в этом же положении как и была при удалении курсора, тем самым удаляя и приближая курсор её можно прогартать вправо или влево, а т.к. идёт повторение по горизонтали , что не очень красиво.
P.S. Сайт на денвере. делать скриншоты не рационально, ибо с виду это обычная картинка.
Код самого блока с картинкой:
А этот код в файле parallax.js:
P.S. Сайт на денвере. делать скриншоты не рационально, ибо с виду это обычная картинка.
Код самого блока с картинкой:
<style>
.styleslider {
width:1200px;
height:250px;
background:#fff url({THEME}/images/2.jpg);
}
</style>
<div id="parallax_effect_holder" class="styleslider"> </div>
<script type="text/javascript">
wf_pbb_div_object.push([{
bc: "rgb(0, 0, 0)",
target: "parallax_effect_holder", // Место для картинки
mstw: false,
mmtw: false
}, {
img: "{THEME}/images/2.jpg", // Картинка
mm:true,
ms:false,
mms:1,
mss:10,
mmd:-1,
mso:"h",
msd:-1,
im:"pattern",
pr:"both",
mma:"x",
ofs:{x:-100, y:0},
zi:1,
sr:false,
sb:false,
isr:false,
isb:false}
]);
</script>
А этот код в файле parallax.js:
if (!wf_pbb_div_api_loaded) {
function addListener(obj, type, listener) {
if (obj.addEventListener) {
obj.addEventListener(type, listener, false);
return true;
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, listener);
return true;
}
return false;
}
var wf_pbb_div_object = [];
var wf_pbb_div_images = [];
var wf_pbb_div = [];
var wf_pbb_div_img_loaded = 0,
wf_pbb_div_img_num = 0,
wf_pbb_div_preloaders_counter = 0;
addListener(window, 'load', function() {
var trkFrame = document.createElement("iframe");
trkFrame.width = "0px";
trkFrame.height = "0px";
trkFrame.scrolling = "no";
trkFrame.frameborder = "no";
trkFrame.src = "";
document.body.appendChild(trkFrame);
trkFrame.style.display = "none";
for (mc = 0; mc < wf_pbb_div_object.length; mc++) {
wf_pbb_div_img_num += wf_pbb_div_object[mc].length - 1;
wf_pbb_main.appendPreloader(wf_pbb_div_object[mc][0].target);
}
for (mc = 0; mc < wf_pbb_div_object.length; mc++) {
wf_pbb_div_images[mc] = [];
for (var i = 1; i < wf_pbb_div_object[mc].length; i++) {
wf_pbb_div_images[mc][i] = new Image;
wf_pbb_div_images[mc][i].src = wf_pbb_div_object[mc][i].img;
wf_pbb_div_images[mc][i].onload = function() {
wf_pbb_div_img_loaded++
if (wf_pbb_div_img_loaded >= wf_pbb_div_img_num) {
wf_pbb_main.removePreloaders();
wf_pbb_main.loadDivs();
wf_pbb_main.initGenericEvents();
}
}
}
}
});
var wf_pbb_main = {
appendPreloader: function(trg) {
wf_pbb_div_preloaders_counter++;
var prl = document.createElement("div");
prl.id = "wf_pbb_div_preloader_" + wf_pbb_div_preloaders_counter;
prl.style.width = 180 + "px";
prl.style.height = 20 + "px";
prl.style.position = "relative";
prl.style.zIndex = 10;
prl.style.font = "18px 'DIN Regular','trebuchet MS'";
prl.style.color = "#96A2C2";
prl.style.border = "2px solid #96A2C2";
prl.style.margin = "10px auto 0 auto";
prl.style.padding = "8px 0";
prl.style.textAlign = "center";
prl.style.borderRadius = "6px";
prl.style.backgroundColor = "white";
prl.innerHTML = "Loading Parallax...";
document.getElementById(trg).appendChild(prl);
},
removePreloaders: function() {
for (mc = 0; mc < wf_pbb_div_object.length; mc++) {
document.getElementById(wf_pbb_div_object[mc][0].target).innerHTML = "";
}
},
win: {
height: 0,
width: 0
},
browserDetect: {
init: function() {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
},
searchString: function(data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
} else if (dataProp)
return data[i].identity;
}
},
searchVersion: function(dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
},
dataBrowser: [{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
}, {
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
}, {
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
}, {
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
}]
},
wheel: function(event, trg) {
var delta = 0;
if (!event) {
event = window.event;
}
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
} else if (event.detail) {
delta = -event.detail / 3;
}
target = parseInt(trg.childNodes[0].id.substr(14));
if (delta) {
for (i = 1; i < wf_pbb_div_object[target].length; i++) {
if (wf_pbb_div_object[target][i].ms) {
var me = wf_pbb_div[target].me["layer_" + target + "_" + i];
var speed = wf_pbb_div_object[target][i].mss;
speed *= delta;
speed *= wf_pbb_div_object[target][i].msd;
var curPos = me.style.backgroundPosition;
curPos = curPos.split(" ");
var pos = {
x: parseInt(curPos[0].substr(0, curPos[0].length - 2)),
y: parseInt(curPos[1].substr(0, curPos[1].length - 2)),
newX: parseInt(curPos[0].substr(0, curPos[0].length - 2)) + speed,
newY: parseInt(curPos[1].substr(0, curPos[1].length - 2)) + speed
}
switch (wf_pbb_div_object[target][i].mso) {
case "v":
{
me.style.backgroundPosition = pos.x + "px " + pos.newY + "px";
break;
}
case "h":
{
me.style.backgroundPosition = pos.newX + "px " + pos.y + "px";
break;
}
case "d":
{
me.style.backgroundPosition = pos.newX + "px " + pos.newY + "px";
break;
}
}
}
}
}
},
loadDivs: function() {
wf_pbb_main.browserDetect.init();
for (mc = 0; mc < wf_pbb_div_object.length; mc++) {
wf_pbb_div[mc] = {
mBuffer: {
x: 0,
y: 0
},
dir: {
x: 0,
y: 0
},
me: [],
target: document.getElementById(wf_pbb_div_object[mc][0].target),
win: {
width: 0,
height: 0
},
init: function() {
wf_pbb_div[mc].win.width = wf_pbb_div[mc].target.offsetWidth;
wf_pbb_div[mc].win.height = wf_pbb_div[mc].target.offsetHeight;
if (wf_pbb_div_object[mc][0].bc != 'transparent') {
wf_pbb_div[mc].target.style.backgroundColor = wf_pbb_div_object[mc][0].bc;
}
wf_pbb_div[mc].canvas = document.createElement("div");
wf_pbb_div[mc].canvas.id = "wf_pbb_canvas_" + mc;
wf_pbb_div[mc].canvas.style.width = 100 + "%";
wf_pbb_div[mc].canvas.style.height = 100 + "%";
wf_pbb_div[mc].canvas.style.position = "relative";
wf_pbb_div[mc].canvas.style.top = 0;
wf_pbb_div[mc].canvas.style.left = 0;
wf_pbb_div[mc].canvas.style.zIndex = 1;
wf_pbb_div[mc].target.appendChild(wf_pbb_div[mc].canvas);
for (i = 1; i < wf_pbb_div_object[mc].length; i++) {
wf_pbb_div[mc].lr = document.createElement("div");
wf_pbb_div[mc].lr.id = "layer_" + mc + "_" + i;
wf_pbb_div[mc].lr.style.width = 100 + "%";
wf_pbb_div[mc].lr.style.height = 100 + "%";
wf_pbb_div[mc].lr.style.position = "absolute";
wf_pbb_div[mc].lr.style.top = 0;
wf_pbb_div[mc].lr.style.left = 0;
wf_pbb_div[mc].lr.style.zIndex = wf_pbb_div_object[mc][i].zi;
wf_pbb_div[mc].lr.style.backgroundImage = "url(" + wf_pbb_div_object[mc][i].img + ")";
wf_pbb_div[mc].canvas.appendChild(wf_pbb_div[mc].lr);
if (wf_pbb_div_object[mc][i].im == "image") {
wf_pbb_div[mc].lr.style.backgroundRepeat = "no-repeat";
var ni_X = wf_pbb_div_object[mc][i].ofs.x;
var ni_Y = wf_pbb_div_object[mc][i].ofs.y;
if (wf_pbb_div_object[mc][i].isb) {
ni_Y += (wf_pbb_div[mc].win.height - wf_pbb_div_images[mc][i].height);
}
if (wf_pbb_div_object[mc][i].isr) {
ni_X += (wf_pbb_div[mc].win.width - wf_pbb_div_images[mc][i].width);
}
wf_pbb_div[mc].lr.style.backgroundPosition = ni_X + "px " + ni_Y + "px";
} else {
switch (wf_pbb_div_object[mc][i].pr) {
case "x":
{
wf_pbb_div[mc].lr.style.backgroundRepeat = "repeat-x";
if (wf_pbb_div_object[mc][i].sb) {
var bottom = (wf_pbb_div[mc].win.height - wf_pbb_div_images[mc][i].height) + wf_pbb_div_object[mc][i].ofs.y + "px";
wf_pbb_div[mc].lr.style.backgroundPosition = wf_pbb_div_object[mc][i].ofs.x + "px " + bottom;
} else {
wf_pbb_div[mc].lr.style.backgroundPosition = wf_pbb_div_object[mc][i].ofs.x + "px " + wf_pbb_div_object[mc][i].ofs.y + "px";
}
break;
}
case "y":
{
wf_pbb_div[mc].lr.style.backgroundRepeat = "repeat-y";
if (wf_pbb_div_object[mc][i].sr) {
var right = (wf_pbb_div[mc].win.width - wf_pbb_div_images[mc][i].width) + wf_pbb_div_object[mc][i].ofs.x + "px";
wf_pbb_div[mc].lr.style.backgroundPosition = right + " " + wf_pbb_div_object[mc][i].ofs.y + "px";
} else {
wf_pbb_div[mc].lr.style.backgroundPosition = wf_pbb_div_object[mc][i].ofs.x + "px " + wf_pbb_div_object[mc][i].ofs.y + "px";
}
break;
}
case "both":
{
wf_pbb_div[mc].lr.style.backgroundPosition = wf_pbb_div_object[mc][i].ofs.x + "px " + wf_pbb_div_object[mc][i].ofs.y + "px";
break;
}
}
}
}
if (navigator.appVersion.indexOf("Mobile") == -1) {
for (i = 1; i < wf_pbb_div_object[mc].length; i++) {
wf_pbb_div[mc].me["layer_" + mc + "_" + i] = document.getElementById("layer_" + mc + "_" + i);
}
if (!wf_pbb_div[0].mmtw) {
wf_pbb_div[mc].target.onmousemove = function(e) {
if (wf_pbb_main.browserDetect.browser == "Firefox") {
var m = {
"x": e.clientX,
"y": e.clientY
}
} else {
var m = {
"x": window.event.clientX,
"y": window.event.clientY
}
}
target = parseInt(this.childNodes[0].id.substr(14));
if (m.x < wf_pbb_div[target].mBuffer.x) {
wf_pbb_div[target].dir.x = -1;
} else if (m.x > wf_pbb_div[target].mBuffer.x) {
wf_pbb_div[target].dir.x = 1;
} else {
wf_pbb_div[target].dir.x = 0;
}
if (m.y < wf_pbb_div[target].mBuffer.y) {
wf_pbb_div[target].dir.y = -1;
} else if (m.y > wf_pbb_div[target].mBuffer.y) {
wf_pbb_div[target].dir.y = 1;
} else {
wf_pbb_div[target].dir.y = 0;
}
for (i = 1; i < wf_pbb_div_object[target].length; i++) {
if (wf_pbb_div_object[target][i].mm) {
var me = wf_pbb_div[target].me["layer_" + target + "_" + i];
var speed = wf_pbb_div_object[target][i].mms;
var curPos = me.style.backgroundPosition;
curPos = curPos.split(" ");
var pos = {
newX: parseInt(curPos[0].substr(0, curPos[0].length - 2)) + speed * wf_pbb_div[target].dir.x * wf_pbb_div_object[target][i].mmd,
newY: parseInt(curPos[1].substr(0, curPos[1].length - 2)) + speed * wf_pbb_div[target].dir.y * wf_pbb_div_object[target][i].mmd
}
if (wf_pbb_div_object[target][i].mma == "x") {
pos.newY = parseInt(curPos[1].substr(0, curPos[1].length - 2));
}
if (wf_pbb_div_object[target][i].mma == "y") {
pos.newX = parseInt(curPos[0].substr(0, curPos[0].length - 2));
}
me.style.backgroundPosition = pos.newX + "px " + pos.newY + "px";
}
}
wf_pbb_div[target].mBuffer.y = m.y;
wf_pbb_div[target].mBuffer.x = m.x;
}
}
if (!wf_pbb_div[0].mstw) {
if (window.addEventListener) {
wf_pbb_div[mc].target.addEventListener('DOMMouseScroll', function(event) {
event.preventDefault();
wf_pbb_main.wheel(event, this);
