Heim > Artikel > Web-Frontend > Natives Javascript ermöglicht nahtlose Bildlaufeffekte. Javascript-Fähigkeiten

Natives Javascript ermöglicht nahtlose Bildlaufeffekte. Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:15:481022Durchsuche

Der horizontale nahtlose Bildlaufeffekt wird auf vielen Websites verwendet, insbesondere wenn auf einigen Unternehmenswebsites Produkte angezeigt werden. Da es sich um einen dynamischen Effekt handelt, kann er der Website viel Farbe verleihen und Benutzer mehr anziehen als statische Bildanzeige Achtung, lassen Sie uns anhand von Beispielcode vorstellen, wie dieser Effekt erzielt werden kann.
Der Code lautet wie folgt:

<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>

Ich hoffe, dass es für alle hilfreich sein wird, Javascript-Programmierung zu lernen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verstehen Sie kurz den Quellcode des Modellmodells und die Ansicht von Backbone.js_GrundkenntnisseNächster Artikel：Verstehen Sie kurz den Quellcode des Modellmodells und die Ansicht von Backbone.js_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen