http://jaukia.github.io/zoomooz/
Ce programme fonctionne avec la librairie Jquery
- <!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='fr' lang='fr'>
- <head>
- <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
-
-
- <!-- Style CSS -->
- <link rel='stylesheet' type='text/css' href='zoomooz.css' />
-
-
-
- </head>
- <body>
-
-
- Cliquez sur les carrés pour tester<br />
-
- <div class="zoomooz_conteneur zoomooz_1">
- <div class="zoomTarget level0">
- <div class="zoomTarget level1">
- </div>
- </div>
- </div>
-
-
-
- <div class="zoomooz_conteneur zoomooz_2">
- </div>
-
-
- <!-- Javascript -->
- <script language='Javascript' type='text/javascript'
- src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
- <script language='Javascript' type='text/javascript'
- src='jquery.zoomooz.min.js'></script>
- <script language='Javascript' type='text/javascript'
- src='appli.js'></script>
-
- </body>
- </html>
- .zoomooz_conteneur{
- float:left;
- position:relative;
- width:700px;
- height:450px;
- }
-
- .zoomooz_1 div{
- float: left;
- margin:5% 0 0 5%;
- }
-
- .zoomooz_1 .level0 {
- background:#ccc;
- width:90%;
- height:90%;
- }
-
- .zoomooz_1 .level2 {
- width:40%;
- height:40%;
- background: #aaa;
- }
-
- .zoomooz_1 .level1 {
- width:40%;
- height:40%;
- background: #ddd;
- float: left;
- font-size:30px;
- line-height:2em;
- text-align:center;
- }
-
-
-
- .zoomooz_2 #element1 {
- position:absolute;
- width:300px;
- height:200px;
- background-color:#cfc;
- top:300px;
- left:700px;
- border:1px solid green;
- -webkit-transform: rotate(175deg);
- -khtml-transform: rotate(175deg);
- -moz-transform: rotate(175deg);
- -ms-transform: rotate(175deg);
- -o-transform: rotate(175deg);
- transform: rotate(175deg);
- }
-
- .zoomooz_2 #element2 {
- position:absolute;
- width:400px;
- height:200px;
- top:400px;
- left:400px;
- background-color:#cff;
- border:1px solid cyan;
- -webkit-transform: rotate(-175deg);
- -khtml-transform: rotate(-175deg);
- -moz-transform: rotate(-175deg);
- -ms-transform: rotate(-175deg);
- -o-transform: rotate(-175deg);
- transform: rotate(-175deg);
- }
-
- .zoomooz_2 #element3 {
- position:absolute;
- width:100px;
- height:100px;
- top:20px;
- left:100px;
- background-color:#ccf;
- border:1px solid cyan;
- -webkit-transform: skewX(25deg) skewY(10deg);
- -khtml-transform: skewX(25deg) skewY(10deg);
- -moz-transform: skewX(25deg) skewY(10deg);
- -ms-transform: skewX(25deg) skewY(10deg);
- -o-transform: skewX(25deg) skewY(10deg);
- transform: skewX(25deg) skewY(10deg);
- }
- jQuery().ready(function(){
-
- $(".zoomTarget").click(function(evt) {
- evt.stopPropagation();
- $(this).zoomTo({targetsize:0.7,debug:true});
- });
-
- $(document).click(function(evt) {
- evt.stopPropagation();
- $("body").zoomTo({targetsize:1.0,debug:true});
- });
-
- $("body").zoomTo({targetsize:1.0,debug:true});
-
- });