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.
ciri baharu jdk8
Komputer tidak boleh menyalin dan menampal
Kaedah Pembatalan Kawalan Akaun Pengguna
Pengenalan kepada Dokumen dalam JS
Bagaimana untuk memadam elemen tatasusunan dalam JavaScript
Perkara yang perlu dilakukan jika avast melaporkan positif palsu
Bagaimana untuk melaksanakan fungsi paging jsp
Kelebihan pycharm
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
