Comment faire des images de déplacer automatiquement + à la souris en CSS/HTML?

Comment créer des images déplacer automatiquement + à la souris en CSS/HTML?

Par exemple Ek Principal Aur Ekk Tu Site De Films

  • Ils sont à l'aide de javascript=)
  • alors dites-moi comment faire pour ajouter cette chose dans ma page html
InformationsquelleAutor Saiful Islam | 2011-11-30
  1. 4

    C'est en fait très facile à faire avec CSS3:

    .moveMe
{
    width: 150px;
    height: 40px;
    background: #f01;
    position: absolute;
    top: 0;
    -webkit-transition: top 2s;
    -moz-transition: top 2s;
    -o-transition: top 2s;
}

.moveMe:hover
{
    top: 10px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
}

    Ceci dit l'élément onHover de transition entre les deux états de top sur une période de 2 secondes et de 0,3 secondes lorsque la souris quitte.

    Découvrez-le ici: http://jsfiddle.net/HGjQC/'

    Que c'est un CSS3 technique, le code ne fonctionne que sur les navigateurs webkit (Chrome, Safari, tout autre navigateur en utilisant le Chrome engine [Rockmelt]), Opera et Mozilla navigateurs.

    Pour IE, en glissement annuel aurez probablement besoin d'utiliser le Javascript pour le moment jusqu'à ce que MS décide de mettre en œuvre plus CSS3.

    • Cela ne fonctionne pas dans IE. caniuse.com/#search=transition
    • Non, il ne sera pas. Mais l'OP pouvez utiliser JS au lieu de cela.
    • Quelle est la différence entre -webkit-transition,-moz-transition, et -o-transition? Aussi, comment vous dire le programme à quelle distance et dans quelle direction aller?
    • Ils sont vendeur préfixes, ils sont utilisés pour indiquer à chaque autre navigateur pour faire la même chose. Lorsque ces fonctions expérimentales sont standardisées, vous pouvez les supprimer et de les utiliser seulement la propriété elle-même. Vous définissez la direction et mesure généralement à l'aide de deux classes: alors que la classe initiale serait top: 0; et une classe supplémentaire (que vous pouvez basculer entre l'utilisation de javascript) a top: 20px;. Lorsque l'interrupteur se produit, la position des transitions de 0 à 10px.
    InformationsquelleAutor Kyle
  2. 1

    Il utilise ce qu'on appelle l'effet de parallaxe. J'ai trouvé un plugin jquery qui semble pour aider à faire ce genre d'effets. Le plugin est appelé Plax, voici la démo

    InformationsquelleAutor Leandro Galluppi
  3. 0

    Peut-être que vous pouvez utiliser JavaScript, comme ceci:
    http://jsfiddle.net/HGjQC/2/

    InformationsquelleAutor Laszlo
  4. 0

    vous pourriez faire un div invisible, et ensuite utiliser la requête .attr() balise de changer l'image sur le vol stationnaire. Je ne suis pas sûr d'obtenir votre question, parce que je n'arrivais pas à trouver le site que voulais à la base de la vôtre hors de.

    InformationsquelleAutor Emilio