Всем доброго времени суток.
Это продолжение темы:
подсветка картинки.
Предложений было много,но никто точного ответа не дал=) у всех как и у меня было абстрактное представление.
В три часа ночи перед сном я врубился как сделать то, что мне нужно.
вот ссылка на демку:
http://l-liava-l.narod.ru/
Она еще сыровата но облагородить не проблема.
Вот мое решение
<HTML>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css.css" type="text/css">
<script type="text/javascript" src="js.js" ></script>
</head>
<body>
<div id="cursor"></div><!-- блок летающий за курсором -->
<div id="img"></div><!--монохромная картинка -->
</body>
</HTML>
|
Код:
|
//тут все и так ясно ширину высоту и left top меняем как хотим
#img{
background:url('2.jpg');
width:469px;
height:500px;
position:absolute;
left:300px;
top:250px;
z-index:0;
}
#cursor{
background:url('1.jpg') no-repeat;
background-position:0px 0px;
position:absolute;
z-index:1;
left:300px;
top:250px;
width:200px;
height:200px;
overflow:hidden;
} |
$(document).ready( function() {
//забираем положение и высоту с шириной из css
var widthM = parseInt($('#img').css('width'));
var heightM = parseInt($('#img').css('height'));
var leftM = parseInt($('#img').css('left'));
var topM = parseInt($('#img').css('top'));
//следим за курсором
$().mousemove( function(e) {
var x = parseInt(e.pageX);
var y = parseInt(e.pageY);
if(x > leftM && x < leftM + widthM && y > topM && y< topM + heightM)//запрещаем цветному блоку выходить за пределы чернобелого
{
x = x - leftM;
y = y - topM;
$('#cursor').css({'left':e.pageX,'top':e.pageY,'background-position': -x + 'px'+' '+ -y +'px'});//заставляем цветной блок бегать за мышкой, менять позицию фона.
}
});
});