Блок от клика принимает горизонтальное положение и увеличивается (jquery)

HTML ↴

<!DOCTYPE
 HTML><html><head>
<meta charset="windows-1251">
<title>Блок от клика принимает горизонтальное положение и увеличивается (jquery)</title>
<style type="text/css" media="screen" />
/* these are not necessary */
html {
background-color:#eee;
}
#prev, #next {
position:absolute;
width:50px;
height:50px;
border:1px solid #aaa;
background-color:#dca;
color:white;
z-index:10;
font-size:40px;
line-height:45px;
text-align:center;
font-family:Helvetica, sans-serif;
cursor:pointer;
cursor:hand;
}
#prev:hover,#next:hover {
background-color:#ba9;
border: 1px solid #999;
}
#navigation {
width:800px;
position:relative;
margin-top:2em;
margin-left:auto;
margin-right:auto;
height:70px;
}
#prev {
left:0px;
}
#next {
right:0px;
}
.zoomContainer {
margin:0;
padding:0;
width:800px;
height:600px;
position:relative;
}
.zoomViewport {
margin:0;
padding:0;
width:800px;
height:600px;
border:1px solid #ccc;
background-color: white;
overflow:hidden;
margin-left:auto;
margin-right:auto;
margin-top:1em;
}
h3 {
font-family: Helvetica Neue, Helvetica, sans-serif;
display:block;
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:5%;
color:#444;
}
div {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
#item1 {
background-color:#fcc;
position:absolute;
left:50px;
top:50px;
width:300px;
height:200px;
border:1px solid red;
}
#item2 {
background-color:#ccf;
position:absolute;
bottom:40px;
right:40px;
width:300px;
height:200px;
border:1px solid blue;
}
#item3 {
background-color:#cfc;
position:absolute;
top:0px;
right:100px;
width:300px;
height:200px;
border:1px solid green;
-webkit-transform: rotate(10deg) translate(0px,0px);
-moz-transform: rotate(10deg) translate(0px,0px);
-o-transform: rotate(10deg) translate(0px,0px);
}
#item3b {
background-color:#cff;
position:absolute;
top:0px;
left:0px;
width:200px;
height:100px;
border:1px solid cyan;
-webkit-transform: rotate(10deg) translate(200px,200px);
-moz-transform: rotate(10deg) translate(200px,200px);
-o-transform: rotate(10deg) translate(200px,200px);
}
#item2b {
background-color:#99f;
position:absolute;
bottom:80px;
right:80px;
width:100px;
height:100px;
border:1px solid blue;
}
#item4 {
background-color:#ffc;
position:absolute;
bottom:200px;
left:200px;
width:200px;
height:200px;
border:1px solid yellow;
-webkit-transform: rotate(30deg) skew(20deg);
-moz-transform: rotate(30deg) skew(20deg);
-o-transform: rotate(30deg) skew(20deg);
}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.zoomooz.min.js"></script>
</head>
<body>
<h3>Zooming inside a container</h3>
<div class="zoomViewport">
<div id="container" class="zoomContainer">
<div id="item4" class="zoomTarget"></div>
</div>
</div>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне