Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 17

Thema: animated balls oder fliegende Bälle, Smilies oder anderes

  1. #1
    HTML Newbie
    Registriert seit
    05.03.2003
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard animated balls oder fliegende Bälle, Smilies oder anderes

    Hallo Leute,
    beschäftige mich erst seit kurzem mit dem Thema Homepage und mit dem verschönern derselben. In diesem Zusammenhang habe ich schon etliche Seiten besucht und so bin ich auch auf diese, meiner Meinung nach sehr gut gemachte Seite, gekommen.
    Nun zu meiner Frage.
    Auf einigen Seiten, auch auf einer Seite von planet-gif.com, und zwar bei den animierten Giffs, und hier den Smilies, gibt es einen Effekt, dass sich an den Mauszeiger etwas dranhängt und diesem nicht mehr von der Seite weicht. Dies möchte ich irgendwie, wenn ich meine Seite mal fertig habe, auch verwenden.
    Wer kann mir hier einen Tip oder Hinweis geben, wie man das macht oder was man dafür braucht oder wer so etwa anbietet. Bin trotz intensiver Suche bisher nicht weitergekommen.
    Würde mich über eine Antwort sehr freuen. Gruß
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Administrator Avatar von admin
    Registriert seit
    16.01.2003
    Ort
    Karlsruhe
    Beiträge
    12.778
    Danke
    1
    Bekam 4 mal "Danke" in 2 Postings
    Blog-Einträge
    42

    Standard

    Das was Du meinst ist ein JavaScript.Das Grundprogramm ist immer gleich, bei dem Effekt mit dem Gummiband.
    Füge das Script in den Body Bereich der Webseite ein.
    Bei den ersten Zeilen werden die Grafiken bestimmt, wobei Du darauf achten mußt, dass die größenangaben im Script mit den tatsächlichen größe der Grafiken übereinstimmt.
    Viel Spaß damit.
    Hier habe ich es auch noch laufen.
    http://www.planet-smilies.de
    Hier das Script:
    Code:
    <div id="dot0" style="position&#58; absolute; visibility&#58; hidden; height&#58; 15; width&#58; 15;">[img]bullet.gif[/img]</div> 
    <div id="dot1" style="position&#58; absolute; height&#58; 15; width&#58; 15;">[img]grafik_1.gif[/img]</div> 
    <div id="dot2" style="position&#58; absolute; height&#58; 15; width&#58; 15;">[img]grafik_2.gif[/img]</div> 
    <div id="dot3" style="position&#58; absolute; height&#58; 15; width&#58; 15;">[img]grafik_3.gif[/img]</div> 
    <div id="dot4" style="position&#58; absolute; height&#58; 15; width&#58; 15;">[img]grafik_4.gif[/img]</div> 
    <div id="dot5" style="position&#58; absolute; height&#58; 15; width&#58; 15;">[img]grafik_5.gif[/img]</div> 
    <div id="dot6" style="position&#58; absolute; height&#58; 15; width&#58; 15;">[img]grafik_6.gif[/img]</div> 
      
    <script LANGUAGE="JavaScript"> 
    <!--// Author&#58; James DeZego. JJD228@AOL.COM 
    var nDots = 7; 
    var Xpos = 0; 
    var Ypos = 0; 
      // fixed time step, no relation to real time 
    var DELTAT = .01; 
      // size of one spring in pixels 
    var SEGLEN = 10; 
      // spring constant, stiffness of springs 
    var SPRINGK = 10; 
      // all the physics is bogus, just picked stuff to 
      // make it look okay 
    var MASS = 1; 
    var GRAVITY = 50; 
    var RESISTANCE = 10; 
      // stopping criterea to prevent endless jittering 
      // doesn't work when sitting on bottom since floor 
      // doesn't push back so acceleration always as big 
      // as gravity 
    var STOPVEL = 0.1; 
    var STOPACC = 0.1; 
    var DOTSIZE = 15; 
      // BOUNCE is percent of velocity retained when 
      // bouncing off a wall 
    var BOUNCE = 0.75; 
    var isNetscape = navigator.appName=="Netscape"; 
      // always on for now, could be played with to 
      // let dots fall to botton, get thrown, etc. 
    var followmouse = true; 
    var dots = new Array&#40;&#41;; 
    init&#40;&#41;; 
    function init&#40;&#41; 
    &#123; 
        var i = 0; 
        for &#40;i = 0; i < nDots; i++&#41; &#123; 
            dots&#91;i&#93; = new dot&#40;i&#41;; 
        &#125; 
      
        if &#40;!isNetscape&#41; &#123; 
            // I only know how to read the locations of the 
            // <LI> items in IE 
            //skip this for now 
            // setInitPositions&#40;dots&#41; 
        &#125; 
      
        // set their positions 
        for &#40;i = 0; i < nDots; i++&#41; &#123; 
            dots&#91;i&#93;.obj.left = dots&#91;i&#93;.X; 
            dots&#91;i&#93;.obj.top = dots&#91;i&#93;.Y; 
        &#125; 
        if &#40;isNetscape&#41; &#123; 
            // start right away since they are positioned 
            // at 0, 0 
            startanimate&#40;&#41;; 
        &#125; else &#123; 
            // let dots sit there for a few seconds 
            // since they're hiding on the real bullets 
            setTimeout&#40;"startanimate&#40;&#41;", 3000&#41;; 
        &#125; 
    &#125; 
    function dot&#40;i&#41; 
    &#123; 
        this.X = Xpos; 
        this.Y = Ypos; 
        this.dx = 0; 
        this.dy = 0; 
        if &#40;isNetscape&#41; &#123; 
            this.obj = eval&#40;"document.dot" + i&#41;; 
        &#125; else &#123; 
            this.obj = eval&#40;"dot" + i + ".style"&#41;; 
        &#125; 
    &#125; 
    function startanimate&#40;&#41; &#123; 
        setInterval&#40;"animate&#40;&#41;", 20&#41;; 
    &#125; 
    // This is to line up the bullets with actual LI tags on the page 
    // Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why 
    // Still doesn't work great 
    function setInitPositions&#40;dots&#41; 
    &#123; 
        // initialize dot positions to be on top 
        // of the bullets in the <ul> 
        var startloc = document.all.tags&#40;"LI"&#41;; 
        var i = 0; 
        for &#40;i = 0; i < startloc.length && i < &#40;nDots - 1&#41;; i++&#41; &#123; 
            dots&#91;i+1&#93;.X = startloc&#91;i&#93;.offsetLeft 
                startloc&#91;i&#93;.offsetParent.offsetLeft - DOTSIZE; 
            dots&#91;i+1&#93;.Y = startloc&#91;i&#93;.offsetTop + 
                startloc&#91;i&#93;.offsetParent.offsetTop + 2*DOTSIZE; 
        &#125; 
        // put 0th dot above 1st &#40;it is hidden&#41; 
        dots&#91;0&#93;.X = dots&#91;1&#93;.X; 
        dots&#91;0&#93;.Y = dots&#91;1&#93;.Y - SEGLEN; 
    &#125; 
    // just save mouse position for animate&#40;&#41; to use 
    function MoveHandler&#40;e&#41; 
    
    &#123; 
        Xpos = e.pageX; 
        Ypos = e.pageY; 
        return true; 
    &#125; 
    // just save mouse position for animate&#40;&#41; to use 
    function MoveHandlerIE&#40;&#41; &#123; 
        Xpos = window.event.x + document.body.scrollLeft; 
        Ypos = window.event.y + document.body.scrollTop; 
    &#125; 
    if &#40;isNetscape&#41; &#123; 
        document.captureEvents&#40;Event.MOUSEMOVE&#41;; 
        document.onMouseMove = MoveHandler; 
    &#125; else &#123; 
        document.onmousemove = MoveHandlerIE; 
    &#125; 
    function vec&#40;X, Y&#41; 
    &#123; 
        this.X = X; 
        this.Y = Y; 
    &#125; 
    // adds force in X and Y to spring for dot&#91;i&#93; on dot&#91;j&#93; 
    function springForce&#40;i, j, spring&#41; 
    &#123; 
        var dx = &#40;dots&#91;i&#93;.X - dots&#91;j&#93;.X&#41;; 
        var dy = &#40;dots&#91;i&#93;.Y - dots&#91;j&#93;.Y&#41;; 
        var len = Math.sqrt&#40;dx*dx + dy*dy&#41;; 
        if &#40;len > SEGLEN&#41; &#123; 
            var springF = SPRINGK * &#40;len - SEGLEN&#41;; 
            spring.X += &#40;dx / len&#41; * springF; 
            spring.Y += &#40;dy / len&#41; * springF; 
        &#125; 
    &#125; 
    function animate&#40;&#41; &#123; 
        // dots&#91;0&#93; follows the mouse, 
        // though no dot is drawn there 
        var start = 0; 
        if &#40;followmouse&#41; &#123; 
            dots&#91;0&#93;.X = Xpos; 
            dots&#91;0&#93;.Y = Ypos; 
            start = 1; 
        &#125; 
        for &#40;i = start ; i < nDots; i++ &#41; &#123; 
            var spring = new vec&#40;0, 0&#41;; 
            if &#40;i > 0&#41; &#123; 
                springForce&#40;i-1, i, spring&#41;; 
            &#125; 
            if &#40;i < &#40;nDots - 1&#41;&#41; &#123; 
                springForce&#40;i+1, i, spring&#41;; 
            &#125; 
            // air resisitance/friction 
            var resist = new vec&#40;-dots&#91;i&#93;.dx * RESISTANCE, 
                -dots&#91;i&#93;.dy * RESISTANCE&#41;; 
            // compute new accel, including gravity 
            var accel = new vec&#40;&#40;spring.X + resist.X&#41;/ MASS, 
                &#40;spring.Y + resist.Y&#41;/ MASS + GRAVITY&#41;; 
            // compute new velocity 
            dots&#91;i&#93;.dx += &#40;DELTAT * accel.X&#41;; 
            dots&#91;i&#93;.dy += &#40;DELTAT * accel.Y&#41;; 
            // stop dead so it doesn't jitter when nearly still 
            if &#40;Math.abs&#40;dots&#91;i&#93;.dx&#41; < STOPVEL && 
                Math.abs&#40;dots&#91;i&#93;.dy&#41; < STOPVEL && 
                Math.abs&#40;accel.X&#41; < STOPACC && 
                Math.abs&#40;accel.Y&#41; < STOPACC&#41; &#123; 
                dots&#91;i&#93;.dx = 0; 
                dots&#91;i&#93;.dy = 0; 
            &#125; 
            // move to new position 
            dots&#91;i&#93;.X += dots&#91;i&#93;.dx; 
            dots&#91;i&#93;.Y += dots&#91;i&#93;.dy; 
            // get size of window 
            var height, width; 
            if &#40;isNetscape&#41; &#123; 
                height = window.innerHeight + document.scrollTop; 
                width = window.innerWidth + document.scrollLeft; 
            &#125; else &#123; 
                height = document.body.clientHeight + document.body.scrollTop; 
                width = document.body.clientWidth + document.body.scrollLeft; 
            &#125; 
            // bounce of 3 walls &#40;leave ceiling open&#41; 
            if &#40;dots&#91;i&#93;.Y >=  height - DOTSIZE - 1&#41; &#123; 
                if &#40;dots&#91;i&#93;.dy > 0&#41; &#123; 
                    dots&#91;i&#93;.dy = BOUNCE * -dots&#91;i&#93;.dy; 
                &#125; 
                dots&#91;i&#93;.Y = height - DOTSIZE - 1; 
            &#125; 
            if &#40;dots&#91;i&#93;.X >= width - DOTSIZE&#41; &#123; 
                if &#40;dots&#91;i&#93;.dx > 0&#41; &#123; 
                    dots&#91;i&#93;.dx = BOUNCE * -dots&#91;i&#93;.dx; 
                &#125; 
                dots&#91;i&#93;.X = width - DOTSIZE - 1; 
            &#125; 
            if &#40;dots&#91;i&#93;.X < 0&#41; &#123; 
                if &#40;dots&#91;i&#93;.dx < 0&#41; &#123; 
                    dots&#91;i&#93;.dx = BOUNCE * -dots&#91;i&#93;.dx; 
                &#125; 
                dots&#91;i&#93;.X = 0; 
            &#125; 
            // move img to new position 
            dots&#91;i&#93;.obj.left = dots&#91;i&#93;.X; 
            dots&#91;i&#93;.obj.top =  dots&#91;i&#93;.Y; 
        &#125; 
    &#125; 
    //--> 
    </script>
    Die Forenregeln und Nutzungsbedingungen sind auch zum lesen da !!!


  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    05.03.2003
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Danke an Admin

    Hallo Admin,
    habe das Script gleich gestern abend mal in den Body einer leeren Homepageseite eingefügt und, da mir die passenden Smilies fehlten, mich bei den von www.planet-smilies.de angebotenen bedient.
    Es funktioniert!!!!.
    Klasse.
    Danke für die schnelle Hilfe, werde das Forum weiterempfehlen.

  4. #4
    Administrator Avatar von admin
    Registriert seit
    16.01.2003
    Ort
    Karlsruhe
    Beiträge
    12.778
    Danke
    1
    Bekam 4 mal "Danke" in 2 Postings
    Blog-Einträge
    42

    Standard

    Noch ein kleiner Tip.
    Verlinke die Smilies nicht von der Seite, sondern lege sie auf Dein eigenen Webspace.
    Sonst kann es passieren, das die Smilies bei einer Umstellung der Seite nicht mehr angezeigt werden können.
    Die Forenregeln und Nutzungsbedingungen sind auch zum lesen da !!!


  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    05.03.2003
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hallo admin,
    das Problem habe ich erkannt und werde natürlich die gifs auf meinen eigenen Webspace hochladen. Müsste ja eigentlich jedem verständlich sein, dass man das so und nicht anders macht.
    Gruß
    Mandeck

  6. #6
    123-hallo-321
    Gast

    Standard geht nicht

    hallo admin, ich hbae s genau wie du es gesagt hast den html-code
    kopiert und eingefügt aber auf meiner hp fuktioniert es nich, da kommen nur so weiße kästen mit einem rotem x !

  7. #7
    Administrator Avatar von admin
    Registriert seit
    16.01.2003
    Ort
    Karlsruhe
    Beiträge
    12.778
    Danke
    1
    Bekam 4 mal "Danke" in 2 Postings
    Blog-Einträge
    42

    Standard

    Der Grund, warum nur Rote Kreuze kommen ist der, das Du noch die Grafiken (Smilies) Dir zusammen suchen mußt.
    Einfach an der Stelle grafik_1.gif Deine Smilies Deiner Wahl ersetzten und nicht vergessen, die Grafiken auf Deinen Server mit hochzuladen.
    Dann geht es

    Code:
    <div id="dot1" style="position&#58; absolute; height&#58; 15; width&#58; 15;">[img]grafik_1.gif[/img]</div>
    Die Forenregeln und Nutzungsbedingungen sind auch zum lesen da !!!


  8. #8
    123-hallo-321
    Gast

    Standard

    dankeschön admin, ich bin ja richtig doof das ich das nicht gemacht habe also nochmals danke

  9. #9
    Administrator Avatar von admin
    Registriert seit
    16.01.2003
    Ort
    Karlsruhe
    Beiträge
    12.778
    Danke
    1
    Bekam 4 mal "Danke" in 2 Postings
    Blog-Einträge
    42

    Standard

    kein Problem und schau mal wieder vorbei
    Die Forenregeln und Nutzungsbedingungen sind auch zum lesen da !!!


  10. #10
    123-hallo-321
    Gast

    Standard

    hallo nochmal ich ( ich weiß ich bin lässtig ) ich wollt nur mal [/b]genau die url von dem smile eingibt

Ähnliche Themen

  1. onclick...???Neue Seite oder nur Backg-oder...oder...???
    Von mtesa2007 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 18.10.2007, 17:02
  2. Antworten: 2
    Letzter Beitrag: 14.11.2006, 23:49
  3. Lima- City, Piranho oder ganz was anderes
    Von Anja im Forum Webhoster - Provider - (free) Webspace - Server - Domain
    Antworten: 1
    Letzter Beitrag: 01.02.2006, 15:06
  4. Zwischenspeiher, oder doch anderes?
    Von im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 13.04.2005, 22:02
  5. FLiegende Bälle als Maus ohne JavaScript
    Von mauritius im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 17.05.2003, 16:18

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •