recherche

Maison >interface Web >js tutoriel >Le javascript natif permet d'obtenir des compétences d'effet de défilement d'image transparentes_javascript

Le javascript natif permet d'obtenir des compétences d'effet de défilement d'image transparentes_javascript

WBOY
WBOYoriginal
2016-05-16 15:15:481086parcourir

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comprendre brièvement le code source du modèle Model et la vue des connaissances Backbone.js_BasicArticle suivant：Comprendre brièvement le code source du modèle Model et la vue des connaissances Backbone.js_Basic

Articles Liés

Voir plus