Движение backround при hover'e

Kisa1993 · November 25, 2012

Хочу реализовать движение картинки, управляя мышью, примерно как тут: http://www.strangebrain.ru/ => Галерея.

(Двигаем мышью бэкграунд тоже двигается)

Для теста решила попробовать вот такой вариант:

index.htm


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Cursor editer</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="sc.js" type="text/javascript"></script>    
</head>

<body>

<div id="editer">"Runing Water"</div>

</body>
</html>

style.css


* {
padding:0;
margin:0;
}
#editer {
width:500px;
height:500px;
background-color:red;
}

sc.js


$(document).ready(function() {

$('#editer').hover(function(e) {
    result = e.pageX;
    $(this).text(result);
});


}); // Конец ready

Проблема: Когда мы наводим курсор на блок editer он меняет текст на координаты по оси Х, но не меняет когда мы двигаем курсор внутри блока.

Пробовала всю страницу забить 1px блоками - чушь, лагает.

Если есть дайте готовое решение (или это только на flash?)

Либо помогите чтобы курсор реагировал на каждый пиксель.

Great Rash · November 26, 2012

Quote
Пробовала всю страницу забить 1px блоками - чушь, лагает.

Вместо hover надо использовать mousemove.

Kisa1993 · November 27, 2012


$(document).ready(function() {

$('#editer').mousemove(function(e) {
    result = e.pageX;
    $(this).css({'background-position':'-20px' - result});
});


}); // Конец ready


* {
padding:0;
margin:0;
}
#editer {
width:100%;
height:400px;
background-image:url("wallpaper.jpg");
}

В чем ошибка?

Edited November 27, 2012 by Kisa1993

Great Rash · November 27, 2012

Вы складываете строку -20px и число result. В JavaSctipt: cтрока + число = строка.

http://jsfiddle.net/KYuf3/

Sign In

Движение backround при hover'e

Question

Kisa1993

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Kisa1993

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information