zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden 2 jquery effekte kombiinieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.10.2015, 22:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2014
Beiträge: 16
simbaiskilla befindet sich auf einem aufstrebenden Ast
Standard 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="#">&uarr; </a> 
    <a id="next" href="#">&darr; </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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.10.2015, 10:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Mal so zum versuchen: Was ist, wenn du nicht absolut Positionierte divs verwendest?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:29 Uhr.