L'effet de défilement horizontal fluide des images est utilisé sur un grand nombre de sites Web, en particulier lorsque certains sites Web d'entreprise affichent des produits. Parce qu'il s'agit d'un effet dynamique, il peut ajouter beaucoup de couleur au site Web et attirer les utilisateurs plus que statique. Affichage de l'image. Attention, expliquons comment obtenir cet effet à travers un exemple de code.
Le code est le suivant :
<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>J'espère qu'il sera utile à tout le monde d'apprendre la programmation javascript.
La différence entre mac air et pro
Quelle est la raison de l'échec de la connexion au serveur ?
Le dossier devient exe
routage doux Wayos
La différence entre Scilab et Matlab
méthode js pour supprimer le nœud
Migrer les données d'un téléphone Android vers un téléphone Apple
Solution à la réinitialisation de la connexion
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
