我是完整的新手，在前端做我的第一步。我花了大部分时间研究一些动画功能，但无法完成，下面是HTML，CSS和Javascript代码：
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Белточчо</title>
<link rel="stylesheet" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<header>
<img class="logo" src="images/logo_green.jpg" alt="logo">
<div class="top-contacts">
<h1> Belltocco Company</h1>
<p> Paper production of all kinds in Kaliningrad</p>
<div class="details">
<img src="images/phone.png" alt="phone icon" width="25px"> <p>+7(4012)778080</p>
<img src="images/map_locator.png" alt="map icon" width="25px"> <p>25 Kant str. Kaliningrad</p>
<img src="images/mail.png" alt="mail icon" width="25px"> <p>info@beltocco.ru</p>
</div>
</div>
</header>
<section>
<div class="product">
<div class="viewport-first" id="viewport1">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/discharger.jpg" alt="discharger">
</a>
</div>
<div class="viewport" id="viewport2">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/napkin-table.jpg" alt="napkin-table">
</a>
</div>
<div class="viewport" id="viewport3">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/napkin.jpg" alt="napkin">
</a>
</div>
<div class="viewport" id="viewport4">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/toilet_paper.jpg" alt="toilet">
</a>
</div>
<div class="clear"></div>
<script>
var clicked = true;
$(document).ready(function() {
$('.viewport').mouseenter(function(e) {
if (clicked) {
$(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
$(this).children('a').children('span').fadeIn(200);
}
}).mouseleave(function(e) {
if (clicked) {
$(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
$(this).children('a').children('span').fadeOut(20);
}
});
});
$(document).ready(function() {
$('.viewport-first').mouseenter(function(e) {
if (clicked) {
$(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
$(this).children('a').children('span').fadeIn(200);
}
}).mouseleave(function(e) {
if (clicked) {
$(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
$(this).children('a').children('span').fadeOut(50);
}
});
});
function animate(a)
{
clicked = false;
$('#viewport1').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport2').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport3').animate({height: '125', left: '-230', top: '135', width: '100'}, 100);
$('#viewport4').animate({height: '125', left: '-230', top: '135', width: '100'}, 100);
$('#viewport1').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport1').children('a').children('span').fadeOut(50);
$('#viewport2').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport2').children('a').children('span').fadeOut(50);
$('#viewport3').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport3').children('a').children('span').fadeOut(50);
$('#viewport4').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport4').children('a').children('span').fadeOut(50);
}
$(document).ready(function() {
$('#viewport1').click(function() {animate(1)});
$('#viewport2').click(function() {animate(2)});
$('#viewport3').click(function() {animate(3)});
$('#viewport4').click(function() {animate(4)});
});
</script>
</div>
</section>
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header {
background:#FFF;
top: 0;
width:1280px;
padding:0px;
height: 220px;
margin-left:0;
}
.logo {
margin-left:200px;
margin-top:50px;
margin-bottom:50px;
width:150px;
float:left;
}
.top-contacts {
float:left;
padding:75px 20px;
color:#000;
}
.top-contacts h1 {
font-size:16px;
color:#8ac23f;
font-weight:normal;
font-style:normal;
font-family:" Aktiv Grotesk Std ", Helvetica, Arial, sans-serif;
}
.top-contacts p {
font-size:12px;
font-weight:normal;
font-style:normal;
font-family:" Aktiv Grotesk Std ", Helvetica, Arial, sans-serif;
padding-top:5px;
}
.details img {
float:left;
}
.details p {
float:left;
padding-top:8px;
padding-left:5px;
padding-right:8px;
}
/* --- Container configuration HOVER OVER IMAGE ---------------------------------------------------------- */
.viewport-first {
border: 3px solid #eee;
float: left;
margin: 50px 9px 9px 220px;
overflow: hidden;
position: relative;
width: 200px;
height: 250px;
border-radius:8px;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport-first a {
display: block;
position: relative;
}
.viewport-first a img {
/*height: 332px;*/
/*left: -20px;*/
position: relative;
/*top: -20px;*/
/*width: 500px;*/
width: 200px;
height: 250px;
}
/* --- Label configuration -------------------------------------------------------------- */
.viewport-first a span {
display: none;
font-size: 2.0em;
font-weight: bold;
height: 100%;
padding-top: 120px;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 100;
}
.viewport-first a span em {
display: block;
font-size: 0.5em;
font-weight: normal;
color:#000;
}
.viewport {
border: 3px solid #eee;
float: left;
margin: 50px 9px 9px 0;
overflow: hidden;
position: relative;
width: 200px;
height: 250px;
border-radius:8px;
}
/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
margin-right: 0;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
display: block;
position: relative;
}
.viewport a img {
/*height: 332px;*/
/*left: -20px;*/
position: relative;
/*top: -20px;*/
/*width: 500px;*/
width: 200px;
height: 250px;
}
/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
display: none;
font-size: 2.0em;
font-weight: bold;
height: 100%;
padding-top: 120px;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 100;
}
.viewport a span em {
display: block;
font-size: 0.5em;
font-weight: normal;
color:#000;
}
/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
background-color: rgba(240, 240, 240, 0.97);
color: #000;
/*text-shadow: #111 0px 0px 20px;*/
}
.dark-background em {
color: #000;
}
/**
* You could create multiple hover background classes for different looks depending on the
* image type. Use your imagination!
*/
.product {
/*background:#EDCAA6;*/
background-image:url(images/paper_texture_picture_169367.jpg);
height:380px;
}
/*
.product img {
margin-top:50px;
width: 200px;
height: 200px;
border-radius: 8px;
margin-right: 5px;
}
.product img:first-child {
margin-left:250px;
}
.clear {
clear:both;
}
/*-----CLEARFIX-----*/
.group:before,.group:after {
content: "";
display: table;}.group:after {
clear: both;}.group {
clear: both;
*zoom: 1;}
/*-------------------------------------*/
在将鼠标悬停在图像上时，我能够实现的是，当您单击图像时，所有四个图像都会变小并在左侧分组，如下图所示。
https://www.dropbox.com/s/xnuve3jl8woxqkn/1.png?dl=0
https://www.dropbox.com/s/78tm69qhwy3p8d6/2.png?dl=0
我无法创建的是以下点击事件后，当4个图像变小并在左侧分组时，在右侧我希望矩形框等于右侧3个图像的大小，我将在其中提供额外的点击的产品类型信息。 除此之外，左侧的4个小图像应响应点击，每次点击后应提供右侧正确产品的适当信息。
答案 0 :(得分：0)
添加隐藏的div
<div id="hidden_div" class="hidden_div"></div>
带有样式
.hidden_div{display:none;}
使用$("#hidden_div").show();，$("#hidden_div").hide();来显示/隐藏div。使用$("#hidden_div").html(desired_content);更改其在单击图像div
答案 1 :(得分：0)
根据您现在所拥有的布局，我看到左侧堆叠的4个较小图像的位置具有固定的左边距。您只需为信息面板添加一个（以前隐藏的）绝对定位的div;一定要添加相对于div.product的位置：
<div class="product" style="position: relative;">
<div class="infoPanel" style="
width: 560px;
height: 220px;position: absolute;
top: 54px;
left: 470px;
background: #fafafa;
padding: 20px;
-webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.17);
-moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.17);
box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.17);
border-radius: 3px;
">
<p>This is the infoPanel</p>
</div>
<!-- the rest of your html -->
</div>