photos_jquery の回転ドア効果を実現するための jQuery の原理の分析

この記事では、画像の回転ドア効果を実現するための jQuery の原理を分析します。参考のために皆さんと共有してください。詳細は次のとおりです:

ここでは水平回転ドア効果のみを説明し、垂直上向き回転ドア効果については説明しません。原理は同じですが、水平回転ドア効果には小さな落とし穴があります。後ほど説明します

まずコードを入力してください:

HTML:

<div class="box">  
  <div style="width: 1000px;" id="boxdiv">
   <ul>
    <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/110927/11-11092G32227.jpg"  class="lazy" / alt="photos_jquery の回転ドア効果を実現するための jQuery の原理の分析" ></a></li>
    <li title="美女海边性感透视装诱惑"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/130621/1-130621145931-50.jpg"  class="lazy" / alt="photos_jquery の回転ドア効果を実現するための jQuery の原理の分析" ></a></li>
    <li title="夏小薇：百变小魔女变身性感数码宝贝"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/130620/19-130620115013.jpg"  class="lazy" / alt="photos_jquery の回転ドア効果を実現するための jQuery の原理の分析" ></a></li>
    <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/130315/5-130315135240.jpg"  class="lazy" / alt="photos_jquery の回転ドア効果を実現するための jQuery の原理の分析" ></a></li>
   </ul>
  </div>
</div>

には別のdivが含まれており、垂直回転ドアの下に存在しないピットを解決するために非常に大きな幅が設定されています。このピットの影響は、li タグのフロートが内部に DIV なしで残された場合、ディスプレイ内の最後のピクチャがピクチャ カルーセルの後で下から上にジャンプすることです。これは、フロート自体の特性によって引き起こされます。親要素の幅が十分でない場合、後続の要素は自動的に左に沈み、上部の幅が十分になると、これらの要素は自動的に浮き上がるため、表示内の最後の画像がジャンプします。この問題を解決するには、DIV をネストし、

のオーバーフロー CSS スタイルを設定します。

CSS:

.box
{
 width: 800px;
 height: 200px;
 margin-top: 100px;
 margin-left: 100px;
 overflow: hidden;
}
.box img
{
 border-style: none;
 height: 200px;
}
.box ul
{
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
.box ul li
{
  float: left;
}

スクリプト:

<script type="text/javascript">
$(document).ready(function () {
 new ZouMa().Start();
});
function ZouMa() {
 this.maxLength = 3; //最低显示数   
 this.Timer = 2000;//计时器间隔时间
 this.Ul = $(".box ul");
 var handId;//计时器id
 var self = this;
 this.Start = function () {
  if (self.Ul.children().length < this.maxLength) {
   self.Ul.append(self.Ul.children().clone());
  }
  handId = setInterval(self.Play, self.Timer);
 }
 this.Play = function () {
  var img = self.Ul.children().eq(0);
  var left = img.children().eq(0).width();
  img.animate({ "marginLeft": (-1 * left) + "px" }, 600, function () {
   //appendTo函数是实现走马灯一直不间断播放的秘诀。
   //目前网上看到的很多走马灯，走到最后一张的时候，会立马闪回第一张，而不是继续从后往前推进，即是没有明白该函数的作用的原因
   $(this).css("margin-left", "auto").appendTo(self.Ul);
  });
 }
}
</script>

いつものように、ここでは jquery のアニメーション効果関数 animate を使用して回転ドア効果を実現し、appendTo 関数と組み合わせて無限再生の効果を実現します。

appendTo の機能については jquery の API ドキュメントを、animate については API ドキュメントを参照してください

jQuery 特殊効果に関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「jQuery アニメーションと特殊効果の使用法の概要」および「一般的な古典の概要」をチェックしてください。 jQuery 特殊効果"

この記事が jQuery プログラミングのすべての人に役立つことを願っています。