ОК. Галерея изображений имеет миниатюры с правой стороны.Они наклонены как перспектива, и между ними есть пространство.Когда вы нажимаете или наводите курсор на миниатюру, она смещается влево и быстро исчезает, создавая впечатление, что когда появляется реальное изображение, оно такое же, но масштабированное и без угла.
Я пытаюсьчтобы найти способ скрыть миниатюру позади большой картинки, вернитесь обратно под груду.Вот код:
HTML:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="plug.css">
<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript' src="plug.js"></script>
</head>
<body>
<div id="content">
<img id="thumb"src="pics/tu1.png" width="355" height="335"alt="">
<img id="thumb2"src="pics/tu2.png" width="355" height="335"alt="">
<img id="thumb3"src="pics/tu3.png" width="355" height="335"alt="">
<img id="thumb4"src="pics/tu4.png" width="355" height="335"alt="">
<img id="pic"src="pics/slider3.jpg" width="510" height="768" alt="">
<img id="pic2"src="pics/slider2.jpg" width="510" height="768" alt="">
<img id="pic3"src="pics/slider1.jpg" width="510" height="768" alt="">
<img id="pic4"src="pics/home.jpg" width="510" height="768" alt="">
</div>
</body>
</html>
CSS:
img#pic {
position:absolute;
display: none;
}
img#pic2 {
position:absolute;
display: none;
}
img#pic3 {
position:absolute;
display: none;
}
img#pic4 {
position:absolute;
display: none;
}
img#thumb {
position:absolute;
top:410px;
left:470px;
z-index:20;
}
img#thumb2 {
position:absolute;
top:410px;
left:525px;
z-index: 19;
}
img#thumb3 {
position:absolute;
top:400px;
left:580px;
z-index: 18;
}
img#thumb4 {
position:absolute;
top:400px;
left:635px;
z-index: 17;
}
#content {
position:relative;
width:1000px;
height:768px;
top:200px;
left:100px;
border:2px solid black;
text-align: left;
}
JS:
$(document).ready(function() {
$('#thumb').click(function() {
$('#thumb').animate({
left:'-=350'
},250,"linear",function() {
$('#thumb').hide();
$('#pic').show();
});
});
$('#thumb2').click(function() {
$('#thumb2').animate({
left:'-=350'
},250,"linear",function(){
$('#thumb2').hide();
$('#pic2').show();
});
});
$('#thumb3').click(function() {
$('#thumb3').animate({
left:'-=350'
},250,"linear",function(){
$('#thumb3').hide();
$('#pic3').show();
});
});
$('#thumb4').click(function() {
$('#thumb4').animate({
left:'-=350'
},250,"linear",function(){
$('#thumb4').hide();
$('#pic4').show();
});
});
})