|
|
16.10.2013, 15:08
|
 |
Аспирант
|
|
Регистрация: 08.10.2013
Сообщений: 47
|
|
|
Вывод изо в видимой области экрана
Реализовано появление увеличенной копии изо при наведении на него курсора мыши.
Стоит задача: показывать эту копию только в видимой области экрана.
Логика такая: берём текущие координаты курсора (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;
Для ширины всё работает изумительно, а вот с высотой не так...
При наведении курсор мыши дрожит и ничего не выводится... порой выводится, только новое окно уходит как за верхнюю, так и за нижнюю границы экрана...
Подскажите, где туплю???
|
|
16.10.2013, 15:16
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,121
|
|
|
Сообщение от Dozentos
|
|
Подскажите, где туплю?
|
Сделай нормальный тестовый пример. |
|
16.10.2013, 15:34
|
|
Аспирант
|
|
Регистрация: 08.10.2013
Сообщений: 47
|
|
Вот полный код функции выводящей увеличенную копию:
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");
});
};
Последний раз редактировалось Dozentos, 16.10.2013 в 15:38.
|
|
16.10.2013, 15:38
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,121
|
|
|
Сообщение от Dozentos
|
|
Вот полный код функции выводящей увеличенную копию
|
Ты понимаешь что есть тестовый пример?  |
|
16.10.2013, 15:42
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
центрирование в видимой области
 скролим кликаем по картинке и она всегда в центре ...
<!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>
|
|
16.10.2013, 15:46
|
|
Аспирант
|
|
Регистрация: 08.10.2013
Сообщений: 47
|
|
|
ksa,
вам скинуть ссылку на ресурс, чтоб можно было посмотреть как "троит"???
Если нет, то я не понимаю, что такое "тестовый пример".
|
|
16.10.2013, 15:47
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,121
|
|
|
Сообщение от Dozentos
|
|
я не понимаю, что такое "тестовый пример"
|
Его за тебя сделал рони... |
|
16.10.2013, 15:48
|
|
Аспирант
|
|
Регистрация: 08.10.2013
Сообщений: 47
|
|
|
рони,
мне картинка нужна не в центре. Нужно чтоб курсор всегда её касался.
Но всё равно спасибо, сейчас разберу ваш код, - может шо полезное для своей задачи и усвою.
|
|
16.10.2013, 15:57
|
|
Аспирант
|
|
Регистрация: 08.10.2013
Сообщений: 47
|
|
Может это тестовый пример?
<!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>
Последний раз редактировалось Dozentos, 16.10.2013 в 15:59.
|
|
16.10.2013, 16:02
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,121
|
|
|
Сообщение от Dozentos
|
|
Может это тестовый пример?
|
Уже лучше... 
Но он не полный 
|
Сообщение от Dozentos
|
|
../php_functions/resizer.php?pic=../mini/creative-advert-print-01.jpg&max=50
|
Это твой частный случай...
Если это запустить тут или скопипастить себе - ничего не грузанется... |
|
|
|
