Пожалуйста, посмотрите на следующую тестовую страницу: образец страницы с двумя изображениями .
Вы видите маленьких изображений, которые немного увеличиваются при перемещении по изображению .
Я использовал jQuery для этого, но столкнулся со следующей проблемой.
Единственный способ получить желаемый эффект - увеличить белое <div>.и сделать изображение в процентах от инкапсуляции <div>.Если <div> увеличивается, изображение также автоматически увеличивается.
Однако, как вы видите на образце страницы, процентное соотношение «а» выбрано, увеличивается до изображения таким образом, что из-за выравнивания на 1 пиксельвидимый ( правая граница на 1 пиксель больше остальных пикселей ).
Я мог бы, конечно, выбрать другой процент, но вместо этого хочу задать следующий вопрос (будучи программистом)Я хочу знать, как решать подобные проблемы, а не эту, в частности).
Я хотел бы иметь возможность И увеличить <div> И увеличить <IMG> во время то же самое действие при наведении - таким образом я мог убедиться, что увеличенное изображение имеет правильный размер.
Я попробовал пару вещей, но так и не получил результат - может кто-нибудь помочь мне здесь?Любая помощь будет высоко оценен.Я учусь использовать jQuery, и мне нужно узнать, как это сделать, прежде чем я действительно смогу начать его использовать.
Код страницы приведен ниже: (фрагмент существующей страницы, куда я сейчас хочу включитьэффект увеличения - цвета только для того, чтобы увидеть разные области).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>enlarge image with jquery</title>
<script type="text/javascript" src="http://www.sitestepper.com/versie2009/_js/jquery-1.4.min.js"></script>
<style>
html,body { margin:0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; }
* { margin:0; padding:0; }
img { border:none }
.grid7x12jq {
width:990px;
height:260px;
margin:10px 0 10px 10px;
padding:9px 0px;
clear:both;
background-color:#ffddff;
}
.grid7x12jq .griditem {
position:relative;
width:137px;
height:267px;
float:left;
border:none;
padding:0px;
margin-right:2px;
margin-bottom:16px;
background-color:#caffff;
}
.grid7x12jq .imgbox {
position:absolute;
left:0px;
top:0px;
border:none;
width:137px;
height:129px;
margin:0;
padding:0;
clear:both;
}
.grid7x12jq .artbox {
position:absolute;
left:0px;
top:138px;
text-align:center;
font-size:11px;
border:none;
padding:0px;
width:137px;
height:48px;
line-height:14px;
margin:0px;
}
.band-foto {
position:absolute;
left:10px;
top:10px;
width:118px;
height:118px;
background-color:white;
border:1px solid black;
}
.band-foto img {
width:88%;
height:88%;
padding:7px;
/*position:absolute;*/
}
</style>
</head>
<body>
<h1>jQuery Test - Enlarge images</h1>
<script type='text/javascript' src='http://www.sitestepper.com/versie2009/_js/jquery-1.4.1.min.js'></script>
<div class='grid7x12jq'>
<div class='griditem'>
<div class='imgbox'>
<div class='band-foto'>
<a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-0181&titel=Estate collier with brilliant and emeralds'><img
src='http://www.adinimages.com/low/07032-0181.P00.JPG' height='100%' width='100%' alt='Estate collier with brilliant and emeralds'/></a>
</div>
</div>
<div class='artbox'>
<div style='height:30px;'>
estate collier with bri...
</div>
3 photos ca.1970<br/>
<a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-0181&titel=Estate collier with brilliant and emeralds'>view product</a><br/>
online price:<br/>€ 99999<br/><br/>
<form class='addbasketbutton' action='http://www.adin.be/en/action_-_sh_put_in_basket_(01).asp?BskDT=07032-0181' method='post'>
<input type='submit' value='Add to basket'/>
</form>
</div>
</div>
<div class='griditem'>
<div class='imgbox'>
<div class='band-foto'>
<a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-4420&titel=Estate collier with brilliant and emeralds'><img
src='http://www.adinimages.com/low/07032-4420.P00.JPG' height='100%' width='100%' alt='Estate collier with brilliant and emeralds'/></a>
</div>
</div>
<div class='artbox'>
<div style='height:30px;'>
estate collier with bri...
</div>
3 photos ca.1970<br/>
<a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-4420&titel=Estate collier with brilliant and emeralds'>view product</a><br/>
online price:<br/>€ 99999<br/><br/>
<form class='addbasketbutton' action='http://www.adin.be/en/action_-_sh_put_in_basket_(01).asp?BskDT=07032-4420' method='post'>
<input type='submit' value='Add to basket'/>
</form>
</div>
</div>
</div>
<div class='clear'></div>
<script type="text/javascript">
$(document).ready(
function()
{
$('.band-foto').hover(
function()
{
$(this)
.animate({ left:'5px', top:'5px', width:'130px', height:'130px'}, 'fast');
} ,
function(){
$(this)
.animate({ left:'10px', top:'10px', width:'118px', height:'118px'}, 'fast');
}
);
}
);
</script>
</body>
</html>