Сегодня достаточно прикольный пример – создать что то вроде подсказки которая постоянно движется за курсором мышки.
Для этого создадим css стиль блока:
<style>
div {
position:absolute;
top:0;
left:0;
padding:5px;
width:200px;
height:100px;
border: 1px solid #283250;
}
</style>
Как видите – я изначально задал ему абсолютное значение.
Добавим div блок на страницу:
<div>Блок, который постоянно двигается за курсором мышки... Например – подсказка или еще что то:)</div>
А теперь пришло время – создать jquery скрипт при движении мышки внутри окна.
<script>
$(document).ready(function(){
$(window).mousemove(function (pos) {
$("div").css('left',(pos.pageX+20)+'px').css('top',(pos.pageY+20)+'px');
});
});
</script>
Как видите тут я применил изменение css стиля при функцией .css(), а так же добавил по 20-ть пикселей – дабы блок не "наезжал" на курсор.
В результате у нас получилось – что то вроде подсказки, которая постоянно "плывет" за курсором