|
|||
2 jquery effekte kombiinieren
moin moin, ich möchte folgenden code gerne noch mit einem weiteren jquery effekt ausstatten.leider funzt der code nich im firefox und leider auch in anderen browsern nich wenn ich es als html5 deklariere (sonst allerdings sehr gut) vllt weiß ja jemand den grund.
das is der effekt der beim scrollen entstehen soll: http://www.jqueryscript.net/layout/j...tion-Snap.html und hier der code sry fuer die unstrukturiertheit Code:
<html style="height:100%;"> <script type="text/javascript" src="http://www.webdesignerwall.com/demo/scrollto-demo/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.webdesignerwall.com/demo/scrollto-demo/js/jquery.scrollTo-min.js"></script> <script type="text/javascript"> $(function() { function scroll(direction) { var scroll, i, positions = [], here = $(window).scrollTop(), collection = $('.post'); collection.each(function() { positions.push(parseInt($(this).offset()['top'],10)); }); for(i = 0; i < positions.length; i++) { if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; } if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; } } if (scroll) { $.scrollTo(scroll, { duration: 750 }); } return false; } $("#next,#prev").click(function() { return scroll($(this).attr('id')); }); $(".scrolltoanchor").click(function() { $.scrollTo($($(this).attr("href")), { duration: 750 }); return false; }); }); </script> <body style="margin:0;padding:0;text-align:center;height:100%"> <style> #nav-dock { position: fixed; right: 15px; top: 35%; } #nav-dock a { display: block; padding: 3px 10px; margin: 3px 0; background: #666; color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3); } #nav-dock a:hover { background: #000; } #nav-dock #next { margin-bottom: 10px;} </style> <div id="nav-dock"> <a id="prev" href="#">↑ </a> <a id="next" href="#">↓ </a> </div> <section class="post" style="height:100%;width:10px;position:absolute;">...</section> <section class="post" style="height:100%;width:10px;position:absolute;top:100%"> ...</section> <section class="post" style="height:100%;width:10px;position:absolute;top:200%" id="p3"></section> <div style="background-image:url(http://www.bilder-upload.eu/upload/bae30f-1444331856.jpg);display:inline-block; background-size:100%"><img src="http://www.bilder-upload.eu/upload/ff9b83-1444332058.png" style="height:300%;"></div></body></html> Geändert von simbaiskilla (08.10.2015 um 22:38 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Das jQuery UI Accordion Plugin ohne jquery kenntnisse nutzen? | papalapap | Javascript & Ajax | 8 | 13.08.2012 23:00 |
Jquery Effekte wie und wo anfangen? Beispiel hier | Andimau | Javascript & Ajax | 4 | 20.05.2012 18:42 |
jQuery (coda slider) und prototype (Lightbox) konflikt | computernerd | Javascript & Ajax | 3 | 21.09.2011 20:04 |
jquery hover effekte nicht aufzeichnen? | sepp88 | Javascript & Ajax | 7 | 21.09.2009 14:50 |
JQuery + Wordpress | VoinG | Javascript & Ajax | 0 | 29.12.2008 17:03 |