JavaScript merealisasikan penatalan lancar dengan kemahiran control_javascript kiri dan kanan-tutorial js-php.cn

JavaScript merealisasikan penatalan lancar dengan kemahiran control_javascript kiri dan kanan

WBOY

Lepaskan： 2016-05-16 16:22:43

asal

1375 orang telah melayarinya

Tatal lancar adalah kesan istimewa yang sering digunakan dalam projek Terdapat juga banyak kod contoh di Internet. Ini adalah kod yang agak mudah dan praktikal.

kod html:

Salin kod Kod adalah seperti berikut:

<html>

<head lang="en">

<meta charset="UTF-8">

<tajuk>Tatal lancartajuk>

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

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

head>

<badan>

<a href="javascript:">Ke kiria>

<a href="javascript:">Ke kanana>

<div id="div1">

                   <li><img src="image/4.jpg">li>

div>

badan>

html>

Kod CSS

Salin kod

Kod adalah seperti berikut: *{ Margin:0; Padding: 0;

}

#div1{

Limpahan: tersembunyi;

latar belakang: biru;

Jawatan: relatif;

Lebar: 600px;

ketinggian: 150px;

Margin:100px auto;

}

#div1 ul{

jawatan: mutlak;

Kiri: 0px;

atas: 0px;

Gaya senarai: tiada;

}

#div1 ul li{

terapung: kiri;

}

#div1 ul li img{

Lebar:150px;

ketinggian:150px;

}

js: kod

Salin kod

Kod adalah seperti berikut:

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;//Steuern Sie die Scrollgeschwindigkeit und -richtung

oUl.innerHTML=oUl.innerHTML oUl.innerHTML;

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

Timer=setInterval(move,30);

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

         clearInterval(timer);

};

oDiv.onmouseout=function(){//Maus rausziehen und weiter scrollen

        timer=setInterval(move,30);

}

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

Geschwindigkeit=-2;

}

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

Geschwindigkeit=2;

}

Funktion move(){//Bild scrollen

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

              oUl.style.left=0;

}

If(oUl.offsetLeft>0){

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

}

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

}

}

Ist der Effekt nicht toll?