Der Effekt der Bewegung des Fokusbildes nach links und rechts, implementiert durch jQuery

Heim

Web-Frontend

js-Tutorial

Der Effekt der Bewegung des Fokusbildes nach links und rechts, implementiert durch jQuery_jquery

May 16, 2016 pm 03:19 PM

jquery 焦点图

Das Beispiel in diesem Artikel beschreibt den Effekt der durch jQuery implementierten Verschiebung des Fokusbilds nach links und rechts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

jQuery-Teil:

$(function () {
  var _speed = 1000;
  var _len = 0;
  var _size = 150;
  var _direction = 'left';
  function mar(){
    if(_direction == 'left'){
      if(_len &gt;= 450){
       _direction = 'right';
      }else{
       $(".flow ul").animate({"margin-left":"-=" + _size + "px"});
       _len += _size;
      }
    }else{
      if(_len &lt;= 0){
       _direction = 'left';
      }else{
       $(".flow ul").animate({"margin-left":"+=" + _size + "px"});
       _len -= _size;
      }
    }
  }
  var _go = setInterval(mar,_speed);
  $("#pic_left").click(function (){
   _direction = 'left';
  });
  $("#pic_right").click(function (){
   _direction = 'right';
  });
  $(".flow li").mouseover(function (){
    clearInterval(_go);
  }).mouseout(function (){
    _go = setInterval(mar,_speed);
  });
});

Nach dem Login kopieren

HTML-Teil

&lt;div class="salebox"&gt;
  &lt;A class="left" id="pic_left"&gt;left&lt;/A&gt;
  &lt;DIV class="pcont" id="ISL_Cont_1"&gt;
    &lt;DIV class="ScrCont"&gt;
      &lt;div class="flowbox" style="width:150px; height:60px; overflow:hidden;float:left;"&gt;
        &lt;div class="flow" style="width:150px;height:60px;"&gt;
          &lt;ul &gt;
           &lt;li&gt;&lt;img src="__PUBLIC__/images/demo/01.jpg" mce_src="__PUBLIC__/images/demo/01.jpg" width="150px" height="60px"&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="__PUBLIC__/images/demo/02.jpg" mce_src="__PUBLIC__/images/demo/02.jpg" width="150px" height="60px"&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="__PUBLIC__/images/demo/03.jpg" mce_src="__PUBLIC__/images/demo/03.jpg" width="150px" height="60px"&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="__PUBLIC__/images/demo/04.jpg" mce_src="__PUBLIC__/images/demo/04.jpg" width="150px" height="60px"&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/DIV&gt;
   &lt;/DIV&gt;
  &lt;A class="right" id="pic_right"&gt;right&lt;/A&gt;
&lt;/div&gt;

Nach dem Login kopieren

Leser, die an weiteren Inhalten zu jQuery-Spezialeffekten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“ und „Zusammenfassung gängiger Klassiker Spezialeffekte von jQuery"

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Erklärung dieser Website

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