funzione "scroll"

**dani_ajl** · 02-05-2016, 11:02

Originariamente inviata da ciro78

dani come già ti è stato detto più volte usa il tag code per il codice

Credevo mi fosse stato detto solo una volta e fosse relativo a codici "esatti" non a porzioni di codice incompleti come

codice:

$(document).ready

**pietro09** · 02-05-2016, 16:05

ho provato a modificare il codice e quello di sotto è semplicemente orribile, ma forse può dare uno spunto per capire il problema.
A me piacerebbe conoscere l'altezza della pagina. La dividerei in n parti e modificherei il codice in tal senso. Purtroppo non conosco abbastanza jquery.

ciao

codice:

<script type="text/javascript">
// <![CDATA[

$(document).ready(function()
{
  var scroll_pos = 0;
  var newImageUrl = "http://localhost/ProveNikon/paesaggi_1/1.jpg";
  $(".div1").attr('src', newImageUrl);

  $(document).scroll(function()
  {
    scroll_pos = $(this).scrollTop();document.getElementById("div2").innerHTML = scroll_pos;
    
    if(scroll_pos > 900) 
    {
      newImageUrl = "http://localhost/ProveNikon/paesaggi_1/6.jpg";
    }
    else if(scroll_pos > 700) 
    {
      newImageUrl = "http://localhost/ProveNikon/paesaggi_1/5.jpg";
    }
    else if(scroll_pos > 500) {
      newImageUrl = "http://localhost/ProveNikon/paesaggi_1/4.jpg";
    }
    else if(scroll_pos > 100) {
      newImageUrl = "http://localhost/ProveNikon/paesaggi_1/3.jpg";
    }
    else if(scroll_pos > 20) {
      newImageUrl = "http://localhost/ProveNikon/paesaggi_1/2.jpg";
    }
    else{
      newImageUrl = "http://localhost/ProveNikon/paesaggi_1/1.jpg";
    }

    $(".div1").attr('src', newImageUrl);
  });
  

});

// ]]>
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="div2" style="position:fixed;"></div>
        <img class="div1" style="position:fixed; width:200px; top:100px;" />
        <%for i=1 to 50 %>
            <br /><br />
        <%next %>
    </div>

**dani_ajl** · 02-05-2016, 17:46

Ciao Pietro,
grazie del tuo script.

Non credo serva conoscere l'altezza della pagina perché tanto l'immagine si andrebbe a sovrapporre. Non so se è proprio lo script che non funzioni (in termini di logica), oppure c'è qualcosa di sintatticamente errato.

**pietro09** · 02-05-2016, 19:46

controlla bene il tuo codice originale ed il mio un po' corretto.
Nel tuo c'erano degli errori.
Oltre tutto lo scroll va da 0 a n perciò si dovrebbe controllare così (pseudo codice)
se scroll < 10 allora ...
altrimenti se scroll < 20 allora

etc.

la mia pagina di prova funziona (male ma funziona).
Ho dovuto aggiustarmi gli intervalli perchè andavano da 0 a oltre 1000

**dani_ajl** · 02-05-2016, 20:20

Ciao Pietro,
a me il tuo codice non fa nemmeno visualizzare "la prima immagine".

Come hai incluso jQuery?

**pietro09** · 03-05-2016, 07:49

Quello di sotto è la pagina di prova completa. E' una pagina aspx ma il codice client è indipendente.
Per prima cosa mi sono creato 50 <br /><br /> per simulare lo scroll.
Poi ho creato un div in posizione fissa per vedere i valori di scroll.
Poi una immagine in posizione fissa per poterla vedere.

codice:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="b.aspx.vb" Inherits="prove_b" %>

<!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 runat="server">
    <title></title>
    <script src="../js/jquery/jquery-min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[

$(document).ready
    (
        function()
            {
                var scroll_pos = 0;
                var newImageUrl = "http://localhost/ProveNikon/paesaggi_1/1.jpg";
                $(".div1").attr('src', newImageUrl);

                $(document).scroll
                (
                    function()
                        {
                            scroll_pos = $(this).scrollTop();
                            document.getElementById("div2").innerHTML = scroll_pos;
    
                            if(scroll_pos < 20) 
                            {
                                newImageUrl = "http://localhost/ProveNikon/paesaggi_1/1.jpg";
                            }
                            else if(scroll_pos < 100) 
                            {
                                newImageUrl = "http://localhost/ProveNikon/paesaggi_1/2.jpg";
                            }
                            else if(scroll_pos < 500) 
                            {
                                newImageUrl = "http://localhost/ProveNikon/paesaggi_1/3.jpg";
                            }
                            else if(scroll_pos < 700) 
                            {
                                newImageUrl = "http://localhost/ProveNikon/paesaggi_1/4.jpg";
                            }
                            else if(scroll_pos < 900) 
                            {
                                newImageUrl = "http://localhost/ProveNikon/paesaggi_1/5.jpg";
                            }
                            else
                            {
                                newImageUrl = "http://localhost/ProveNikon/paesaggi_1/6.jpg";
                            }

                            $(".div1").attr('src', newImageUrl);
                        }
                );
  

            }
        );

// ]]>
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="div2" style="position:fixed;"></div>
        <img class="div1" style="position:fixed; width:200px; top:100px;" />
        <%for i=1 to 50 %>
            <br /><br />
        <%next %>
    </div>
    
    </form>
</body>
</html>

**fcaldera** · 03-05-2016, 09:33

Originariamente inviata da pietro09

Quello di sotto è la pagina di prova completa. E' una pagina aspx ma il codice client è indipendente.
Per prima cosa mi sono creato 50 <br /><br /> per simulare lo scroll.
Poi ho creato un div in posizione fissa per vedere i valori di scroll.
Poi una immagine in posizione fissa per poterla vedere.

Sarebbe meglio prevedere un preload (anche progressivo) delle immagini, altrimenti in condizioni reali le immagini ci metteranno un po' a caricarsi rispetto alla posizione di scroll

**pietro09** · 03-05-2016, 09:42

Originariamente inviata da fcaldera

Sarebbe meglio prevedere un preload (anche progressivo) delle immagini, altrimenti in condizioni reali le immagini ci metteranno un po' a caricarsi rispetto alla posizione di scroll

sì, concordo.

il vero problema mio però è che non riesco a capire la logica. Una cosa è una pagina alta 1000px e una cosa una pagina alta dieci volte tanto. Quegli if dubito che servano molto.
Non sarebbe meglio intercettare la posizione di elementi strategici nella pagina e cambiare l'immagine se lo scroll supera quella posizione?

**dani_ajl** · 04-05-2016, 00:03

Ciao Pietro, io alla fine userò questo codice e ci aggiungerò un preload data la quantità di immagini (anche se pesano poco).

Script Jquery:

codice:

<script type="text/javascript">
$(document).ready(function()
{
 var lastI
 $(window).scroll(function() {
    var scrollTop = $(this).scrollTop()
    console.log(scrollTop)
    var i = (scrollTop / 100).toFixed(0)
    if (i !== lastI)
        $(".show").attr({
            "src": "img/" + i + ".jpg",
            "alt": i
        })
    lastI = i
})})
</script>

Css:

codice:

body {
    height: 6000px; // dipende dalla lunghezza della pagina, per adesso è un valore a caso
}


.show {
    position: fixed;
    top: 0px;
    left: 0px;
}

HTML:

codice:

<img class="show" alt="0" src="img/1.jpg" />

Discussione: funzione "scroll"

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio