Rumah > Artikel > hujung hadapan web > Javascript asli mencapai kemahiran effect_javascript tatal gambar yang lancar

Javascript asli mencapai kemahiran effect_javascript tatal gambar yang lancar

WBOYasal: 2016-05-16 15:15:481021semak imbas

Kesan tatal lancar mendatar gambar digunakan pada sebilangan besar tapak web, terutamanya apabila sesetengah tapak web korporat memaparkan produk Kerana ia adalah kesan dinamik, ia boleh menambah banyak warna pada tapak web dan menarik pengguna lebih daripada statik paparan gambar. Perhatian, mari perkenalkan cara mencapai kesan ini melalui kod contoh.
Kodnya adalah seperti berikut:

<html>
<head>
<meta charset="gb2312">
<title>脚本之家</title>
<style type="text/css"> 
#demo{ 
 background:#FFF; 
 overflow:hidden; 
 border:1px dashed #CCC; 
 width:500px; 
} 
#indemo{
 float:left;
 width:2000px;
} 
#indemo a{
 width:100px;
 height:100px;
 float:left;
 background-color:blue;
 margin-left:5px;
 text-align:center;
 line-height:100px;
 color:red;
 text-decoration:none;
}
#demo1{float:left;} 
#demo2{float:left;} 
</style>
<script type="text/javascript"> 
window.onload=function(){
 var speed=10; 
 var tab=document.getElementById("demo"); 
 var tab1=document.getElementById("demo1"); 
 var tab2=document.getElementById("demo2"); 
 tab2.innerHTML=tab1.innerHTML; 
 function Marquee(){ 
 if(tab2.offsetWidth-tab.scrollLeft<=0){
  tab.scrollLeft-=tab1.offsetWidth 
 } 
 else{ 
  tab.scrollLeft++; 
 } 
 } 
 var MyMar=setInterval(Marquee,speed); 
 tab.onmouseover=function() {clearInterval(MyMar)}; 
 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
} 
</script>
</head>
<body>
<div id="demo">
 <div id="indemo">
 <div id="demo1"> 
  <a href="#">脚本之家一</a> 
  <a href="#">脚本之家二</a> 
  <a href="#">脚本之家三</a> 
  <a href="#">脚本之家四</a> 
  <a href="#">脚本之家五</a> 
  <a href="#">脚本之家六</a> 
 </div>
 <div id="demo2"></div>
 </div>

Saya harap ia akan membantu semua orang untuk mempelajari pengaturcaraan javascript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Fahami secara ringkas kod sumber model Model dan View of Backbone.js_Basic pengetahuanArtikel seterusnya：Fahami secara ringkas kod sumber model Model dan View of Backbone.js_Basic pengetahuan

Artikel berkaitan

Lihat lagi