<!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"> <head id="Head1" runat="server"> <title></title> <!-- <link rel="stylesheet" href="style2.css" media="screen" /> --> <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> <script src="http://mathewhood.com/misc/js/jQueryRotateCompressed.2.1.js" type="text/javascript"></script> <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script> <style type="text/css"> #container{ position:relative; width:500px; } #button { position:absolute; width:300px; background-color:pink; top:420px; z-index:5; margin:0 auto; text-align:center; padding-top:15px; padding-bottom:15px; color:#fff; text-transform:uppercase; font-weight:bold; left:90px; } #globe_background{ background:none); width:494px; height:397px; z-index:1; position:absolute; top:0; } #globe_hands{ background:none; width:295px; height:129px; z-index:3; top:265px; left:96px; position:absolute; } #globe_small { /*background:url(images/globe_small.png);*/ position:absolute; z-index:4; /*-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -ms-transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -ms-transition-property: transform;*/ } #globe_large { background:green; height:276px; width:276px; position:absolute; top:125; left:106px; z-index:2; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -ms-transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -ms-transition-property: transform; } #button:hover + #globe_small{ /*-webkit-animation-name: spin; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 1s; -moz-animation-name: mozspin; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -moz-animation-duration: 1s; -o-animation-name: ospin; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; -o-animation-duration: 1s; -ms-animation-name: msspin; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -ms-animation-duration: 1s; animation-name: nospin; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 1s;*/ } #button:hover ~ #globe_large{ -webkit-animation-name: spin; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 1s; -moz-animation-name: mozspin; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -moz-animation-duration: 1s; -o-animation-name: ospin; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; -o-animation-duration: 1s; -ms-animation-name: msspin; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -ms-animation-duration: 1s; animation-name: nospin; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 1s; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes mozspin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-o-keyframes ospin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes nospin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes msspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } * { border-style: none; border-color: inherit; border-width: 0; margin: 0; padding: 0; outline: none; } .under { position:absolute; left:0px; top:0px; z-index:-1; } .over { position:absolute; z-index:-1; } .overabout { position:absolute; z-index:-1; left: 470px; top: 96px; background-image: url('images/abouttemp.png'); background-position: bottom; } .overabout:hover { position:absolute; background-image: url('images/abouttemp.png'); background-position: top; z-index:-1; } .overgallery { position:absolute; z-index:-1; left: 724px; top: 379px; background-image: url('images/gallery.png'); background-position: top; } .overgallery:hover { position:absolute; background-image: url('images/gallery.png'); background-position: bottom; z-index:-1; } </style> <script> var stop = function (){ $("#image").rotate({ angle:0, animateTo:0, callback: stop, easing: function (x,t,b,c,d){ // t: current time, b: begInnIng value, c: change In value, d: duration return c*(t/d)+b; } }); } $(document).ready(function() { rotation(); $("#image").rotate({ bind: { mouseover : function() { stop(); }, mouseout : function() { rotation(); } } }); }); var rotation = function() { $("#image").rotate({ angle: 0, animateTo: 360, callback: rotation, easing: function(x, t, b, c, d) { // t: current time, b: begInnIng value, c: change In value, d: duration return c * (t / d) + b; } }); } </script> </head> <body background="images/black_background.jpg"> <div class="over" style="height: 669px; width: 100%;"> <div id="globe_small"> <img src="images/img2.png" id="image"/> </div> </div> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)