Detaillierte Erläuterung des Beispielcodes für den nahtlosen JavaScript-Scrolling-Effekt-js-Tutorial-php.cn

Detaillierte Erläuterung des Beispielcodes für den nahtlosen JavaScript-Scrolling-Effekt

黄舟

Freigeben： 2017-03-27 14:16:29

Original

1325 Leute haben es durchsucht

In diesem Artikel wird ein Beispielcode für js vorgestellt, um einen nahtlosen Scrolleffekt zu erzielen. Der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert it

Kein Unsinn Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen. Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
  * {
  padding: 0;
  margin: 0;
  }
 .box {
 width: 600px;
 height: 200px;
 margin: 60px auto;
 overflow: hidden;
 position: relative;
 }
 ul {
  list-style-type: none;
  width: 2000px;
  position: absolute;
  top: 0;
  left: 0;
 }
 li {
  float: left;
 }
</style>
</head>
<body>
<p class="box" id="box">
 <ul id="gun">
 <li><img src="01.jpg" alt="" /></li>
 <li><img src="02.jpg" alt="" /></li>
 <li><img src="03.jpg" alt="" /></li>
 <li><img src="04.jpg" alt="" /></li>
 <li><img src="01.jpg" alt="" /></li>
 <li><img src="02.jpg" alt="" /></li>
 </ul>
 <script type="text/javascript">
       var box = document.getElementById("box");
       var gun = document.getElementById("gun");
       
       function $(i){
       return document.getElementsByTagName("img")[i];
       }
       var num = 0;
       all();
       function all(){
      var shi= setInterval(fun,5);
      gun.onmouseover=function (){
         clearInterval(shi);
      }
      gun.onmouseout=function (){
         all();
      }
      function fun(){
      if(num<=-1200){
          num=0;
      }else{
         gun.style.left=num+"px";
            num--;
          }  
          }
        } 
 </script>
</p>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes für den nahtlosen JavaScript-Scrolling-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!