js控制marquee無空白滾動

來源:互聯網
上載者:User

<div id="Parent"
 style="cursor: hand; overflow: hidden; width: 800px; height: 50px">
 <div id="Child_A" style="float: left; white-space: nowrap;">
  <img src="" style="width: 50px; height: 50px;">
  <img src="" style="width: 50px; height: 50px;">
  |
 </div>
</div>
<input type="button" value="stop" onclick="aa.stop()">
<input type="button" value="left" onclick="aa.left()">
<input type="button" value="right" onclick="aa.right()">

//js控製圖片移動(marquee無空白左右移動)

<script type="text/javascript">
function Marque() {//js封裝類
 Marque.prototype.Parent = document.getElementById("Parent");
 Marque.prototype.ChildA = document.getElementById("Child_A");
 Marque.prototype.parentWidth = Marque.prototype.Parent.offsetWidth;
 Marque.prototype.count = 2;
 Marque.prototype.ChildA.innerHTML = Marque.prototype.ChildA.innerHTML + " " + Marque.prototype.ChildA.innerHTML;
 while (Marque.prototype.Parent.scrollWidth <= Marque.prototype.parentWidth) {
  Marque.prototype.count *= 2;
  Marque.prototype.ChildA.innerHTML = Marque.prototype.ChildA.innerHTML + " " + Marque.prototype.ChildA.innerHTML;
 }
 Marque.prototype.speed = 10;
 Marque.prototype.flag = "stop";
 Marque.prototype.Marqueeleft = function () {
  if (Marque.prototype.ChildA.offsetWidth / Marque.prototype.count - Marque.prototype.Parent.scrollLeft <= 0) {
   Marque.prototype.Parent.scrollLeft -= Marque.prototype.ChildA.offsetWidth / Marque.prototype.count;
  } else {
   Marque.prototype.Parent.scrollLeft++;
  }
 };
 Marque.prototype.Marqueeright = function () {
  if (Marque.prototype.Parent.scrollLeft <= 0) {
   Marque.prototype.Parent.scrollLeft = Marque.prototype.Parent.scrollLeft + Marque.prototype.ChildA.offsetWidth / Marque.prototype.count;
  } else {
   Marque.prototype.Parent.scrollLeft--;
  }
 };
 Marque.prototype.Myleft = "";
 Marque.prototype.Myright = "";
 Marque.prototype.stop = function () {
  if (Marque.prototype.flag == "stop") {
   return true;
  }
  if (Marque.prototype.flag == "right") {
   clearInterval(Marque.prototype.Myright);
   Marque.prototype.flag = "stop";
   return true;
  }
  if (Marque.prototype.flag == "left") {
   clearInterval(Marque.prototype.Myleft);
   Marque.prototype.flag = "stop";
   return true;
  }
 };
 Marque.prototype.left = function () {
  if (Marque.prototype.flag == "stop") {
   Marque.prototype.Myleft = setInterval(Marque.prototype.Marqueeleft, Marque.prototype.speed);
   Marque.prototype.flag = "left";
   return true;
  }
  if (Marque.prototype.flag == "right") {
   clearInterval(Marque.prototype.Myright);
   Marque.prototype.Myleft = setInterval(Marque.prototype.Marqueeleft, Marque.prototype.speed);
   Marque.prototype.flag = "left";
   return true;
  }
  if (Marque.prototype.flag == "left") {
   return true;
  }
 };
 Marque.prototype.right = function () {
  if (Marque.prototype.flag == "stop") {
   Marque.prototype.Myright = setInterval(Marque.prototype.Marqueeright, Marque.prototype.speed);
   Marque.prototype.flag = "right";
   return true;
  }
  if (Marque.prototype.flag == "right") {
   return true;
  }
  if (Marque.prototype.flag == "left") {
   clearInterval(Marque.prototype.Myleft);
   Marque.prototype.Myright = setInterval(Marque.prototype.Marqueeright, Marque.prototype.speed);
   Marque.prototype.flag = "right";
   return true;
  }
 };
}

var aa=new Marque();
var aa=new Marque(); 

   </script>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.