16.10.2013, 17:02
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
 лёгким движением руки брюки превращаются ... или за курсором но в пределах видимой части экрана...
<!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: 2000px;
width: 2000px;
padding: 0px;
margin: 0px;
}
</style>
<script>
jQuery.fn.center = function(event)
{
var w = $(window),
top = (w.height()-this.height())+w.scrollTop(),
left = (w.width()-this.width())+w.scrollLeft();
this.css("position","absolute");
this.css("top",top > event.pageY ? event.pageY : top + "px");
this.css("left", left > event.pageX ? event.pageX : left+"px");
return this;
}
function creatOverlay(event){
$("img").center(event)
}
$(document).on({"mousemove": creatOverlay},"body")
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" >
</body>
</html>
|
|
16.10.2013, 19:29
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
в пределах видимости
 шортики...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
body{
height: 2000px;
width: 2000px;
padding: 0px;
margin: 0px;
}
#preview{
position:absolute;
border:1px solid #ccc;
background:#FFF;
padding:5px;
color:#03F;
z-index: 100;
display: none;
}
.block{
min-height: 400px;
position: relative;
top: 300px;
left: 350px;
}
</style>
<script>
jQuery.fn.center = function(event)
{
var w = $(window),
top = (w.height()-this.outerHeight(true))+w.scrollTop() -(event.pageY+22),
left = (w.width()-this.outerWidth(true))+w.scrollLeft() -(event.pageX+7);
this.css("position", "absolute");
this.css("top", top > 0? event.pageY+22: (event.pageY-this.outerHeight(true)) + "px");
this.css("left", left> 0? event.pageX+7: (event.pageX-this.outerWidth(true))+"px");
return this;
}
$(document).ready(function ()
{
$(".block img").mousemove(function (event)
{
$("#preview").center(event);
}
)
$(".block img").mouseenter(function ()
{
$("#preview").attr({'src': $(this).parent().data('src')})
.stop(true, true).fadeIn()
}
)
$(".block img").mouseleave(function ()
{
$("#preview").stop(true, true).fadeOut();
}
)
}
)
</script>
</head>
<body> <img id="preview" >
<div class='block'>
<a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a>
</div>
</body>
</html>
Последний раз редактировалось рони, 01.03.2018 в 01:36.
|
|
16.10.2013, 23:41
|
 |
Аспирант
|
|
Регистрация: 08.10.2013
Сообщений: 47
|
|
Шож, никто не помог... но решение я всё же нашёл. Может пригодится кому, выложу. Вот рабочий пример:
<head>
<meta charset="utf-8">
<title>Гостиницы мира</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<script language='javascript'>
this.imagePreview = function(){
$("a.preview").hover(function(e){
var mouseTop = e.pageY - $(window).scrollTop();
var mouseLeft = e.pageX - $(window).scrollLeft();
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<div id='preview'><img src='"+ this.id +"' />"+ c +"</div>");
var imgTop = e.pageY;
imgTop = (imgTop + $('#preview').height()) > ($(window).scrollTop() + $(window).height()) ? ($(window).scrollTop() + $(window).height()) - $('#preview').height() - 20 : imgTop;
var imgLeft = e.pageX;
imgLeft = (imgLeft + $('#preview').width()) > ($(window).width() + $(window).scrollLeft()) ? ($(window).scrollLeft() + $(window).width()) - $('#preview').width() - 20 : imgLeft;
$("#preview").css({top: imgTop + "px",
left: imgLeft + "px"}).fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
var mouseTop = e.pageY - $(window).scrollTop();
var mouseLeft = e.pageX - $(window).scrollLeft();
var imgTop = e.pageY;
imgTop = (imgTop + $('#preview').height()) > ($(window).scrollTop() + $(window).height()) ? ($(window).scrollTop() + $(window).height()) - $('#preview').height() - 20 : imgTop;
var imgLeft = e.pageX;
imgLeft = (imgLeft + $('#preview').width()) > ($(window).width() + $(window).scrollLeft()) ? ($(window).scrollLeft() + $(window).width()) - $('#preview').width() - 20 : imgLeft;
$("#preview").css({top: imgTop + "px",
left: imgLeft + "px"});
});
};
$(document).ready(function(){
imagePreview();
});
</script>
<style>
#preview{
position:absolute;
border:1px solid #ccc;
background:#FFF;
padding:5px;
display:none;
color:#03F;
}
.block{
min-height: 400px;
}
</style>
</head>
<body>
<div class='block'>gbgfgfb</div>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a>
<div class='block'>gbgfgfb</div>
</body>
|
|
16.10.2013, 23:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Dozentos,
|
Сообщение от Dozentos
|
|
Шож, никто не помог... но решение я всё же нашёл. Может пригодится кому, выложу. Вот рабочий пример
|
чем вам вариант "шортики"неподошёл? да и ваш вариант скачет сам по себе да и за пределы видимой части
|
|
17.10.2013, 08:25
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
|
Сообщение от рони
|
|
шортики...
|
Ловчее работают.  |
|
17.10.2013, 12:00
|
|
Аспирант
|
|
Регистрация: 08.10.2013
Сообщений: 47
|
|
|
А можно про "шортики поподробнее"???
|
|
17.10.2013, 12:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Dozentos
|
|
можно про "шортики поподробнее"???
|
что именно? код перед вами - если картинка невлезает справа она показывается слева от курсора также верх низ-- источник самой картинки атрибут дата в ссылке |
|
17.10.2013, 12:56
|
|
Аспирант
|
|
Регистрация: 08.10.2013
Сообщений: 47
|
|
Простите, невнимателен. Не заметил сразу код, думал это мой вчерашний.
Сейчас разберу. Кстати, не понимаю, почему мой тестовый пример здесь работает плохо??? На реальной странице всё нормально. Вот, можете посмотреть здесь |
|
17.10.2013, 13:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Dozentos
|
|
На реальной странице всё нормально.
|
ок!вполне достаточно, хотя при известной сноровке картинка выскакивает за пределы видимой части но это мелочи ))) на картинке фото ушло в право появился нижний скролл - возможно бордюр или отступы или кто-то быстро мышкой водит ))
Последний раз редактировалось рони, 10.01.2014 в 04:43.
|
|
17.10.2013, 15:58
|
|
Аспирант
|
|
Регистрация: 08.10.2013
Сообщений: 47
|
|
|
Хм... моей "сноровки" на это не хватило...
В любом случае можно считать тему закрытой. Есть два варианта решения поставленной задачи: мой и "шортики". Можно использовать любой (хотя "шортики", конечно, попроще и постабильнее).
Всем большое спасибо!
|
|
|
|
