увеличение картинки при наведении мышкой
помогите пожалуйста с багом.
решил немного разобраться с jquery. сделал такую вещь: на страничке есть картинки, когда наводишь мышкой на картинку, она увеличивается, когда мышка убирается, она уменьшается. но получился такой баг: если быстро водить мышкой по картинках, пока они не успевают уменьшаться, то они увеличиваются все больше и больше. за код не ругайте сильно. уверен, написано все очень неправильно, просто вот-вот недавно начал изучение javascript и jquery вот собственно html страничка со скриптом
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(makethumb);
//Функция изменяет размеры фотографий до размера дивов и центрирует
function makethumb(){
var divw = parseFloat($("div.thumb").css("width"));
var divh = parseFloat($("div.thumb").css("height"));
$("img").each(
function(){
var imgw = parseFloat($(this).css("width"));
var imgh = parseFloat($(this).css("height"));
var k = imgw / divw;
$(this).css("width",imgw / k);
$(this).css("height",imgh / k);
$(this).css("margin-top",(divh - imgh / k) / 2);
var imgw = parseFloat($(this).css("width"));
var imgh = parseFloat($(this).css("height"));
if (imgh > divh){
var k = imgh / divh;
$(this).css("width",imgw / k);
$(this).css("height",imgh / k);
$(this).css("margin-top",0);
$(this).css("margin-left",(divw - imgw / k) / 2);
};
}
);
}
//Функция увеличивает/уменьшает фотографии при наведении мышкой
$(function(){
var elm = {
"src": "",
"w": 0,
"h": 0
};
var k = 1.5;
$("div.thumb").hover(
function(){
if (elm.src != $(this).children("img").attr("src")){
elm.src = $(this).children("img").attr("src");
elm.w = parseFloat($(this).children("img").css("width"));
elm.h = parseFloat($(this).children("img").css("height"));
}
$(this).css({backgroundColor:"#BEBEBE"});
$(this).children("img").stop(true).animate({
width:elm.w * k,
height:elm.h * k,
left:- (elm.w * (k - 1) / 2),
top:- (elm.h * (k - 1) / 2)
},500
);
},
function(){
$(this).css({backgroundColor:"#808080"});
$(this).children("img").stop(true).animate({
width:elm.w,
height:elm.h,
left:0,
top:0
},500
);
}
);
});
</script>
</head>
<body>
<div id="container">
<div class="thumb">
<img src="img/1.jpg"/>
</div>
<div class="thumb">
<img src="img/2.jpg" />
</div>
<div class="thumb">
<img src="img/3.jpg" />
</div>
<div style="clear:both" />
</div>
</body>
</html>
файл стилей
#container{
width: 670px;
margin: 50px auto;
}
div.thumb{
border: 1px solid #000000;
background-color: #808080;
width:150px;
height:150px;
margin:30px;
padding: 5px;
float:left;
}
img{
position:relative;
}
|
Для таких целей использование JS излишне:
#container{
position: relative;
width: 670px;
margin: 50px auto;
}
#container .thumb{
float:left;
padding: 5px;
border: 1px solid #000;
margin:30px;
background: #808080;
}
#container .thumb img {
width:150px;
height:150px;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;
}
#container .thumb img:hover {
width: 200px;
height: 200px;
margin: -25px;
}
|
но в таком случае картинки не сохраняют свои пропорции.
|
ну убери высоту или ширину у #container .thumb img:hover. тогда будут
|
попробывал убрать. все равно не то.
во-первых, уменьшенные картинки все равно же без сохранения пропорций. во-вторых, если, например, убрать ширину, то вертикальные картинки увеличиваются нормально, а вот горизонтальные нет. Если убрать высоту, то наоборот. |
Цитата:
Цитата:
стоит почитать CSS. |
блин, вы сначала попробуйте сделать, а потом уже говорите.
если оставить одно свойство у #container .thumb img (ведь именно это отвечает за миниатюры картинок), то во-первых, квадратики будут совсем не квадратики, а прямоугольники, и во-вторых, у картинок будет одинаковой только одна сторона, вторая будет разной когда оставляю одно свойство у #container .thumb img:hover , то нормально будут увеличиваться только картинки, у которых высота больше ширины (или наоборот в зависимости от того, какое свойство оставлено), другие будут искажаться. вот так. не работают ваши советы на практике! |
попробуйте поменять .stop(true) на .stop(true, true). тогда тогда ваши изображения при прерывании анимации должны получить конечные свойства
|
Цитата:
|
http://www.ionden.com/widgets/wg/zoom/index.php Пример увеличения картинок ОТ ЦЕНТРА,а не от угла_то что мне необходимо добиться.Подскажите ,пожайлуста,как это работает? А то у меня от угла - увеличиваются картинки ,как и с animate с ловлей их лефт-офсетов так и cо стандартным hide().show() .А от центра ???....:-? Это вопрос по Квери
|
| Часовой пояс GMT +3, время: 04:18. |