|
Всплывающий див около курсора
Всем доброе время суток! Есть такая пороблема, нужен скрипт который будет отображать див при наведении на обьект, собственно я это сделал, главная проблема в том, что див должен отображаться в зависимости от положения курсора в окне браузера: грубо говоря если див правее середины экрана то слева если ниже середины то сверху и т.д. Главная проблема в том, что див может быть разных размеров, в зависимости от содержимого. Тут пример уже имеющегося скрипта:
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
var posit = 0;
var halfX = screen.width/2;
var halfY = screen.height/2;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;} //e.pageX e.pageY tekusheje polozhenije kursora
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;} // event.clientX evant.clientY pozicija kursora otnositelno zoni klijenta
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; } // document.all vse elementi na dvizhenije mishi srabativajet funkcija
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) { //self.pageYOffset self.pageXOffset zna4enija stranici: esli ne prokru4ivajetsa to 0, 0; esli prokru4ivajetsa to pikseli
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
if(cX-10 > halfX){posit =(cX-10)-halfX/2; d.style.left = posit + "px";} //esli pozicija kursora praveje seredini okna to div budet otobrazhatsa sleva
else{
d.style.left = (cX+10) + "px";
}
if(cY-10 > halfY){posit =(cY-10)-halfY/2; d.style.top = posit + "px";} //esli nizhe seredini okna, to div budet otobrazhatsa vverxu
else{
d.style.top = (cY+10) + "px";
}
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
Буду благодарен за помощь Ж)
|
