Déplacer simplement une image
Résolu/Fermé
kisscool387
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
20 août 2016
-
29 août 2013 à 23:10
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 1 sept. 2013 à 22:19
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 1 sept. 2013 à 22:19
Bonjour,
Je cherche à faire défilé une image lentement et horizontalement et de facon infini.
Je sais que avec Jquery c'est fesable, mais comme je suis hyper nul en JS, j'ai cherché partout des scripts que j'aurai pu adapter, mais impossible.
Je trouve des scripts super pour des diapos infini ....
Mais le détail important que je recherche, me semble inexisté.
Je ne veux pas que mon image s'arrête genre 2sec puis repars, je voudrai que elle défile sans jamais s'arrêter.
Pour ceux qui connaisse, en sort je cherche la même chose que la balise "marquee" en html, mais en JS car "marquee" saccade le défilement.
Je remercie d'avance les personnes qui prendront le temps pour m'aider.
Je cherche à faire défilé une image lentement et horizontalement et de facon infini.
Je sais que avec Jquery c'est fesable, mais comme je suis hyper nul en JS, j'ai cherché partout des scripts que j'aurai pu adapter, mais impossible.
Je trouve des scripts super pour des diapos infini ....
Mais le détail important que je recherche, me semble inexisté.
Je ne veux pas que mon image s'arrête genre 2sec puis repars, je voudrai que elle défile sans jamais s'arrêter.
Pour ceux qui connaisse, en sort je cherche la même chose que la balise "marquee" en html, mais en JS car "marquee" saccade le défilement.
Je remercie d'avance les personnes qui prendront le temps pour m'aider.
A voir également:
- Déplacer simplement une image
- Déplacer une colonne excel - Guide
- Image iso - Guide
- Légender une image - Guide
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
3 réponses
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
30 août 2013 à 23:03
30 août 2013 à 23:03
Hello,
Voici un bout de code qui devrait t'aider.
Voici un bout de code qui devrait t'aider.
<html>
<head>
<title></title>
<style type="text/css">
body{
text-align: center;
}
.container{
width: 1000px;
height: 300px;
margin:0 auto;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
overflow: hidden;
position: relative;
}
img{
position: absolute;
right: -200px;
}
</style>
</head>
<body>
<div class="container">
<img id="picture" src="http://lorempixel.com/200/300" />
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var marqeeJs = {
animate: function(){
var me = this;
$('#picture').animate({
right: 1000
}, 5000, function(){
$('#picture').css('right', '-200px');
me.animate();
});
},
_initialize: function(){
this.animate();
}
}
marqeeJs._initialize();
</script>
</body>
</html>
kisscool387
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
20 août 2016
11
Modifié par kisscool387 le 31/08/2013 à 03:20
Modifié par kisscool387 le 31/08/2013 à 03:20
Merci beaucoup !
Mais le problème est le même que ceux que je rencontré avec les scripts que j'avais déjà trouvé.
Sur ce script, l'image s'arrête aussi.
Je vais explique ce que je souhaite faire, ca sera peut être plus explicite.
En faire je voudrais faire défiler doucement des nuages (avec un image transparente png) en "z-index: 3; position: absolute;" dans mon header.
Pour ça, mon image doit se répété horizontalement et défilé lentement.
Mais le problème est le même que ceux que je rencontré avec les scripts que j'avais déjà trouvé.
Sur ce script, l'image s'arrête aussi.
Je vais explique ce que je souhaite faire, ca sera peut être plus explicite.
En faire je voudrais faire défiler doucement des nuages (avec un image transparente png) en "z-index: 3; position: absolute;" dans mon header.
Pour ça, mon image doit se répété horizontalement et défilé lentement.
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
31 août 2013 à 15:36
31 août 2013 à 15:36
Re !
Voici un script qui devrait résoudre ton problème:
Il suffit juste te modifier le src du div #picture avec l'url de ton image, et le reste se fait tout seul.
Voici un script qui devrait résoudre ton problème:
Il suffit juste te modifier le src du div #picture avec l'url de ton image, et le reste se fait tout seul.
<html>
<head>
<title></title>
<style type="text/css">
body{
text-align: center;
}
.pictures{
position: absolute;
left:0;
width: 9999px;
}
.container{
width: 1000px;
height: 300px;
margin:0 auto;
overflow: hidden;
position: relative;
}
img{
position: relative;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="pictures">
<img id="picture" src="http://1-background.com/images/clouds/white-clouds-blue-sky-seamless-background-tile.jpg" />
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var marqeeJs = {
cWidth:0,
iWidth: 0,
nbPicture:0,
imgElements: new Array(),
animate: function(){
var me = this;
$('.pictures img:first').animate({
'margin-left': -me.iWidth
}, 7000,'linear', function(){
//$('#picture').css('right', '-200px');
$(this).remove();
$('.pictures').append($(me.img).clone());
me.animate();
});
},
postInit: function(){
this.cWidth = $('.container').width();
this.iWidth = this.img.width;
this.nbPictures = Math.ceil(this.cWidth / this.iWidth + 1);
var $img = $(this.img);
for(var i = 0; i < this.nbPictures; i++){
//$img.css('left', i*this.iWidth);
$('.pictures').append($img.clone());
}
this.animate();
},
_initialize: function(){
var me = this;
//this.animate();
this.img = new Image();
this.img.onload = function() {
me.img = this;
$('#picture').remove();
me.postInit();
}
this.img.src = $('#picture').attr('src');
}
}
marqeeJs._initialize();
});
</script>
</body>
</html>
kisscool387
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
20 août 2016
11
1 sept. 2013 à 17:16
1 sept. 2013 à 17:16
C'est super, MERCI !
c'est exactement ce que je voulais.
Depuis le temps que je galère dessus 1000 merci.
c'est exactement ce que je voulais.
Depuis le temps que je galère dessus 1000 merci.
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
1 sept. 2013 à 22:19
1 sept. 2013 à 22:19
De rien ! :)