2012-01-21 3 views
1

私は、jquery.li-scroller.1.0.jsを使用してストリップ内にスクロールしたnewstickerを持つWebサイトを開発しています。jquery.li-scroller.1.0.js newsticker modification

ページのアドレスは次のとおりです。http://www.designforce.us/demo/ticker/index.html

我々はL字型画面上でマウスを置くと、ストリップが停止されます。この段階では、現行のliの直下にテキストがあるポップアップボックスを表示したいと考えています。私がやったことと、マウスポインタをストリップの上に置くと、newstickerが停止し、そのテキストとともにボックスが表示されます。

問題: jquery.li-scroller newstickerには{overflow:hidden}のラッパーがありますので、liでポップアップボックスを追加すると表示されません。その理由は、私はポップアップ(。ティックポップ)とjqueryドキュメントの準備ができて、別のスペースと白と一緒にコード化しました。私のスクリプトは次のとおりです。

$('ul#ticker01 li').each(function(e){ 
    var iClass; 
    $(this).hover(function(){ 
     iClass = $(this).attr('class'); 
     $(this).css('height',$('tickPop').height()+30) 
     var offset = $(this).offset(); 
     var left = offset.left; 
     var top = offset.top+20; 
     var iWidth = $(this).width(); 
     var sText = $(this).children().html(); 
     $(this).css('background','#f6f4f4'); 
     $('.tickPop').css('left',left); 
     $('.tickPop').css('top',top); 
     $('.tickPop').css('width',iWidth); 
     $('.tickPop').css('display','block'); 
     $('.tickPop').text(sText); 
    }, function(){ 

     $('.tickPop').mouseleave(function(){ 
      bHovering = false; 
      $(this).css('display','none'); 
     }); 

     $(this).css('background','transparent'); 
     //$('.tickPop').css('display','none'); 
     if(iClass == 'Yellow') 
      $(this).css('background','url(images/icon-yellow.jpg) left center no-repeat'); 
     else 
      $(this).css('background','url(images/icon-white.jpg) left center no-repeat'); 

    }); 

}); 

ポップアップボックスは、デフォルトでは非表示とL字型画面上のユーザーホバーその後、jqueryの関数は属性$( 『tickPop「)を設定するとされる(『 tickPop』)$と呼ばれるCSS(』表示」。 、 'ブロック')、それは可視です。

問題は、マウスポインタをポップアップボックスの上に移動すると、ポップアップボックスからマウスを離してからnewstickerを開始したいときにnewstickerが再びスクロールを開始することです。

親愛なる専門家に助言してください..............? 親切な応答を楽しみにしています。

参考にする

答えて

0

jquery li-scroller sourcesを変更する必要があります。

(LI-スクロール源から)このコードを見て:

function scrollnews(spazio, tempo){ 
       $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);}); 
       } 
       scrollnews(totalTravel, defTiming);    

           // $strip = $(this) so it triggers when you're hover a news 
       $strip.hover(function(){ 
       jQuery(this).stop(); 
       }, 
       function(){ 
       var offset = jQuery(this).offset(); 
       var residualSpace = offset.left + stripWidth; 
       var residualTime = residualSpace/settings.travelocity; 
       scrollnews(residualSpace, residualTime); 
       }); 

次のようなものを追加する必要があります。私はそのコードをテストしていないが、動作するはずです

 var popup = jQuery('.tickPop'); 
    popup.hover(function(){ 
        $strip.stop(); 
          }, 
          function(){ 
          var offset = jQuery(this).offset(); 
          var residualSpace = offset.left + stripWidth; 
          var residualTime = residualSpace/settings.travelocity; 
          scrollnews(residualSpace, residualTime); 
        }); 

を....

PSインデントに申し訳ありません