JavaScript réalise un défilement transparent avec les compétences control_javascript gauche et droite-js tutoriel-php.cn

JavaScript réalise un défilement transparent avec les compétences control_javascript gauche et droite

WBOY

Libérer： 2016-05-16 16:22:43

original

1366 Les gens l'ont consulté

Le défilement transparent est un effet spécial qui est souvent utilisé dans les projets. Il existe également de nombreux exemples de codes sur Internet. Ce que je partage ici est un code relativement simple et pratique avec une bonne compatibilité, veuillez l'étudier attentivement. .

code html :

Copier le code Le code est le suivant :

<html>

<head lang="fr">

<meta charset="UTF-8">

<title>Défilement fluidetitle>

<script src="js/0010.js">script>

<link rel="stylesheet" type="text/css" href="css/0010.css" />

tête>

<corps>

<a href="javascript:">Aller à gauchea>

<a href="javascript:">Allez à droitea>

<div id="div1">

div>

corps>

html>

Code CSS

Copier le code

Le code est le suivant : *{ Marge :0 ; Remplissage : 0 ; >

#div1{

Débordement : masqué ;

fond : bleu ;

Position : relative ;

Largeur : 600 px ;

hauteur : 150px ;

Marge : 100 px auto ;

>

#div1ul{

Position : absolue ;

Gauche : 0px ;

haut : 0px;

Style de liste : aucun ;

>

#div1 ul li{

flotter : gauche ;

>

#div1 ul li img{

Largeur : 150 px ;

hauteur:150px;

>

js : code

Copier le code

Le code est le suivant :

window.onload=function(){

var oDiv=document.getElementById('div1');

var oUl=oDiv.getElementsByTagName('ul')[0];

var aLi=oUl.getElementsByTagName('li');

var timer=null;

var speed=2;//Contrôler la vitesse et la direction du défilement

oUl.innerHTML=oUl.innerHTML oUl.innerHTML;

oUl.style.width=aLi[0].offsetWidth*aLi.length 'px';

Timer=setInterval(move,30);

oDiv.onmouseover=function(){//mouseover provisoire

         clearInterval(timer);

};

oDiv.onmouseout=function(){//Retirez la souris et continuez à faire défiler

        timer=setInterval(move,30);

>

Document.getElementsByTagName('a')[0].onclick=function(){

Vitesse=-2;

>

Document.getElementsByTagName('a')[1].onclick=function(){

Vitesse=2;

>

Fonction move(){//Défilement d'image

Si(oUl.offsetLeft<-oUl.offsetWidth/2){

              oUl.style.left=0;

>

Si(oUl.offsetLeft>0){

              oUl.style.left=-oUl.offsetWidth/2 'px';

>

oUl.style.left=oUl.offsetLeft vitesse 'px';

>

>

L'effet n'est-il pas génial ?