Вывод изо в видимой области экрана
Реализовано появление увеличенной копии изо при наведении на него курсора мыши.
Стоит задача: показывать эту копию только в видимой области экрана. Логика такая: берём текущие координаты курсора (e.pageX и e.pageY), прибавляем к ним значение ширины и высоты нового блока соответственно и делаем выводы: Если новое значение меньше ширины (высоты) экрана выводим новый блок в позиции курсора; Если больше - получаем координаты позиции курсора минус ширина (высота) нового блока и смотрим: Если новая координата больше 0 - выводим в ней новый блок; Если меньше - делаем её равной 0... На практике реализовал так: left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX; top_coor = (e.pageY+$('#preview').height())>$(window).height( ) ? e.pageY - $('#preview').height() : e.pageY; left_coor = left_coor < 0 ? 0 : left_coor; top_coor = top_coor < 0 ? 0 : top_coor; Для ширины всё работает изумительно, а вот с высотой не так... При наведении курсор мыши дрожит и ничего не выводится... порой выводится, только новое окно уходит как за верхнюю, так и за нижнюю границы экрана... Подскажите, где туплю??? |
Цитата:
|
Вот полный код функции выводящей увеличенную копию:
this.imagePreview = function(){
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.id +"' />"+ c +"</p>");
left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX;
top_coor = (e.pageY+$('#preview').height())>$(window).height() ? e.pageY - $('#preview').height() : e.pageY;
left_coor = left_coor < 0 ? 0 : left_coor;
top_coor = top_coor < 0 ? 0 : top_coor;
$("#preview")
.css("top",top_coor + "px")
.css("left",left_coor + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX;
top_coor = (e.pageY+$('#preview').height())>$(window).height() ? e.pageY - $('#preview').height() : e.pageY;
left_coor = left_coor < 0 ? 0 : left_coor;
top_coor = top_coor < 0 ? 0 : top_coor;
$("#preview")
.css("top",top_coor + "px")
.css("left",left_coor + "px");
});
};
|
Цитата:
|
центрирование в видимой области
:write: скролим кликаем по картинке и она всегда в центре ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
body{
height: 1000px;
}
</style>
<script>
jQuery.fn.center = function()
{
var w = $(window);
this.css("position","absolute");
this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
return this;
}
function creatOverlay(){
$(this).center()
}
$(document).on({"click": creatOverlay}, "img")
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" >
</body>
</html>
|
ksa,
вам скинуть ссылку на ресурс, чтоб можно было посмотреть как "троит"??? Если нет, то я не понимаю, что такое "тестовый пример". |
Цитата:
|
рони,
мне картинка нужна не в центре. Нужно чтоб курсор всегда её касался. Но всё равно спасибо, сейчас разберу ваш код, - может шо полезное для своей задачи и усвою. |
Может это тестовый пример?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Гостиницы мира</title>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"> </script>
<script type="text/javascript" src="js/big_img.js"> </script>
<script language='javascript'>
$(document).ready(function(){
imagePreview();
});
</script>
</head>
<body>
<a href='javascript: void(null)' id="../mini/creative-advert-print-01.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-01.jpg&max=50" /></a>
<a href='javascript: void(null)' id="../mini/creative-advert-print-02.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-02.jpg&max=50" /></a>
<a href='javascript: void(null)' id="../mini/creative-advert-print-04.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-04.jpg&max=50" /></a>
<a href='javascript: void(null)' id="../mini/creative-advert-print-05.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-05.jpg&max=50" /></a>
<a href='javascript: void(null)' id="../mini/creative-advert-print-07.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-07.jpg&max=50" /></a>
<a href='javascript: void(null)' id="../mini/creative-advert-print-09.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-09.jpg&max=50" /></a>
<a href='javascript: void(null)' id="../mini/creative-advert-print-12.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-12.jpg&max=50" /></a>
</body>
</html>
|
Цитата:
Но он не полный :( Цитата:
Если это запустить тут или скопипастить себе - ничего не грузанется... |
| Часовой пояс GMT +3, время: 04:33. |