<
Справочны мат FAQ
jQuery Slidy - A Transition Plugin (current version: 0.1)
With menu, custom children elements and time and speed control:
--------
| <html> | |
| <head> | |
| <meta http-equiv="Content-animation" content="text/html; charset=UTF-8"> | |
| <meta http-equiv="Pragma" content="no-cache"/> | |
| <meta http-equiv="Expires" content="-1"/> | |
| <title>jQuery Slidy - A Transition Plugin</title> | |
| <link type="text/css" rel="stylesheet" href="css/jquery.slidy.css"/> | |
| <script type="text/javascript" src="js/jquery.js"></script> | |
| <script type="text/javascript" src="js/jquery.slidy.min.js"></script> | |
| <style type="text/css"> | |
| body { | |
| font: 10px verdana; | |
| } | |
| a#coffee-link, div#coffee-container { | |
| border-radius: 4px; | |
| -khtml-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -opera-border-radius: 4px; | |
| -webkit-border-radius: 4px; | |
| } | |
| div#link a { | |
| color: #EA9C00; | |
| font: bold 10px verdana; | |
| letter-spacing: .9px; | |
| text-decoration: none; | |
| } | |
| div#link a:hover { | |
| color: #DC5; | |
| font-weight: bold; | |
| letter-spacing: .9px; | |
| text-decoration: underline; | |
| } | |
| a#coffee-link { | |
| background: url('img/coffee.png') 6px 2px no-repeat; | |
| border: 1px solid #D9C640; | |
| color: #FFF; | |
| display: block; | |
| font-weight: bold; | |
| letter-spacing: .9px; | |
| padding: 4px 5px 4px 26px; | |
| text-decoration: none; | |
| } | |
| a#coffee-link:hover { | |
| text-decoration: underline; | |
| } | |
| div#coffee-container { | |
| background-color: #DC5; | |
| float: right; | |
| margin-right: 15px; | |
| } | |
| div.description { | |
| color: #555; | |
| letter-spacing: .1px; | |
| margin-bottom: 10px; | |
| text-indent: 7px; | |
| text-align: left; | |
| width: 99%; | |
| } | |
| div#link { | |
| color: #AB9927; | |
| text-indent: 7px; | |
| } | |
| div.notice { | |
| font: 9px verdana; | |
| color: #777; | |
| letter-spacing: .1px; | |
| margin-bottom: 3px; | |
| text-indent: 7px; | |
| text-align: left; | |
| width: 99%; | |
| } | |
| div.session { | |
| font: bold 13px verdana; | |
| border-bottom: 1px solid #EFEFEF; | |
| color: #444; | |
| letter-spacing: .7px; | |
| margin-bottom: 10px; | |
| margin-top: 24px; | |
| text-align: left; | |
| width: 99%; | |
| } | |
| div.source, div.source-group { | |
| background: #F8F8FF; | |
| border: 1px solid #EFEFEF; | |
| border-left: 3px solid #CCC; | |
| color: #444; | |
| font: 12px monospace; | |
| letter-spacing: .1px; | |
| margin-bottom: 7px; | |
| margin-top: 5px; | |
| padding: 7px; | |
| width: 99%; | |
| } | |
| div.text { | |
| color: #555; | |
| letter-spacing: .1px; | |
| margin-bottom: 20px; | |
| margin-top: 5px; | |
| text-align: left; | |
| text-indent: 7px; | |
| width: 99%; | |
| } | |
| div.title { | |
| font: bold 17px verdana; | |
| color: #269; | |
| letter-spacing: .7px; | |
| margin-bottom: 20px; | |
| margin-top: 5px; | |
| text-align: left; | |
| width: 99%; | |
| } | |
| span.comment-html, span.comment-script { | |
| font: 12px monospace; | |
| letter-spacing: .1px; | |
| margin-bottom: 7px; | |
| margin-top: 5px; | |
| } | |
| span.comment-html { | |
| color: #5e85de; | |
| } | |
| span.comment-script { | |
| color: #578F73; | |
| } | |
| span#version { | |
| color: #777; | |
| font: 10px verdana; | |
| } | |
| div.group { | |
| float: left; | |
| margin-right: 10px; | |
| } | |
| div.source-group { | |
| margin-top: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body topmargin="0" leftmargin="0"> | |
| <div class="group"> | |
| <img src="imagenes/img-derecha-nueva.jpg" /> | |
| <img src="imagenes/imagenes-derecha-nueva2.jpg" /> | |
| <img src="imagenes/composicion.jpg" /> | |
| </div> | |
| </body> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $('#default').slidy(); | |
| $('#pause').slidy({ | |
| cursor: 'wait', | |
| pause: true, | |
| animation: 'fade' | |
| }); | |
| $('#menu').slidy({ | |
| children: 'a', | |
| menu: true, | |
| pause: true, | |
| speed: 1000, | |
| time: 4000, | |
| animation: '', | |
| width: 640, | |
| height: 255 | |
| }); | |
| $('.group').slidy({ | |
| speed: 1500, | |
| time: 5000, | |
| height: 592, | |
| animation: 'fade', | |
| width: 305 | |
| }); | |
| }); | |
| </script> | |
| </html> |
Комментариев нет: