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

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.

A voir également:

Déplacer simplement une image
Déplacer une colonne excel - Guide
Image iso - Guide
Comment agrandir une image - Guide
Acronis true image - Télécharger - Sauvegarde
Déplacer la barre des taches windows 11 - Guide

3 réponses

Réponse 1 / 3

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

Hello,

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>

Réponse 2 / 3

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

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.

Réponse 3 / 3

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

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.

<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

C'est super, 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

De rien ! :)

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Sur la plage...

Discussions similaires

Newsletters