Défilement vers la gauche/droite ?

Par Lakh92, il y a 15 ans

Javascript

Salut salut, j'aimerais réaliser un défilement vers la gauche, ou vers la droite un peu comme le petit bloc de login du site.
Je sais pas vraiment comment ça fonctionne, mais un petit code ou bien le nom des fonctions serait cool à savoir hein ~~

Merci d'avance

4 réponses

PhiSyX, il y a 15 ans

Hello avec animate() !!!

welcoMattic, il y a 15 ans

Avec un overflow : hidden; en CSS pour cacher ce qui dépasse de ta div, et a mon avis tu devrais t'en sortir ;)

Lakh92, il y a 15 ans

Merci à vous deux,
En effet, animate() fonctionne bien, mais j'arrive pas à faire l'effet de défilement :(
Une idée :s ?

PhiSyX, il y a 15 ans

Oui, télécharger le plugin easing de jquery :p
Pour reprendre un exemple du site jquery :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
.block { position:absolute; background-color:#abc; left:50px; width:90px; height:90px; margin:5px; }
</style>
<!-- Télécharger jquery et le plugin -->
<script type="text/javascript" src="/js/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/lib/jquery/jquery.easing.js"></script>
<script type="text/javascript">
    $(function(){
        $("#right").click(function(){
            $(".block").animate({"left": "+=50px"}, {duration: 1000, easing: 'easeOutElastic'});
        });
        $("#left").click(function(){
            $(".block").animate({"left": "-=50px"}, {duration: 1000, easing: 'easeOutElastic'});
        });
    });
</script>
</head>
<body>
    <div id="test">
        <div id="right">
            <a href="#">Test</a>
        </div>
        <div id="left">
            <a href="#">Test2</a>
        </div>
        <div class="block"></div>
    </div>
</body>
</html>