滚动新闻自动收报机Jquery - 问题 [英] Scrolling News Ticker Jquery - Issues

问题描述

原始来源&示例：

http://www.htmldrive.net/items/show/397/Vertical-Scrolling-News-Ticker-With-jQuery-jCarouse

你好再次!!滚动新闻Ticker Jquery有一些问题：

Hello Again!! Scrolling News Ticker Jquery with some issues:

第一期：Internet Explorer错误消息

First Issue : Internet Explorer Error Message

对象不支持此属性或方法行：269：第269行）

" Object doesn't support this property or method " Line: 269: Line 269)

           ticker.mouseenter(function() {  //   <---Line: 269
          //stop current animation
          ticker.children().stop();

        });

---

• 第二个问题：点击新闻选项（指向页面链接）的唯一方法是通过网站示例中的蓝色文本标题。
  我希望用户能够点击
  包含图像的选项的整个部分。



---

• Second Issue : The only way of clicking on a news option (to be directed to the link of a page) is through the text title that in the website example is in blue color. I would like for the user to be able to click on the whole section of the option that includes the image aswell.


• 第三期：当新闻滚动时，它看起来都是一体的，有没有办法添加一个分隔每个部分的行。


• Third Issue : When the news scrolls it looks all in one, is there a way to add a line to separate each section.


• Forth Issue ：当用户将鼠标
  放在一个部分上时，有没有办法暂停自动滚动？


• 有没有办法在下面添加更多文字标题和类别？


• Forth Issue: Is there a way to pause the automatic scrolling when a user puts the mouse over a section?
• Is there a way to add more text under the title and category?

以下是脚本本身的IE问题右侧带箭头突出显示
：

Here is the script itself with the IE issue highlighted with an arrow on the right hand side below:

   <script type="text/javascript">
      $(function() {

    //cache the ticker
    var ticker = $("#ticker");

    //wrap dt:dd pairs in divs
    ticker.children().filter("dt").each(function() {

      var dt = $(this),
        container = $("<div>");

      dt.next().appendTo(container);
      dt.prependTo(container);

      container.appendTo(ticker);
    });

    //hide the scrollbar
    ticker.css("overflow", "hidden");

    //animator function
    function animator(currentItem) {

      //work out new anim duration
      var distance = currentItem.height();
        duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.020;

      //animate the first child of the ticker
      currentItem.animate({ marginTop: -distance }, duration, "linear", function() {

        //move current item to the bottom
        currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

        //recurse
        animator(currentItem.parent().children(":first"));
      }); 
    };

    //start the ticker
    animator(ticker.children(":first"));

    //set mouseenter
     ticker.mouseenter(function() {


    ticker.mouseenter(function() {  //  <---Line: 269
      //stop current animation
      ticker.children().stop();

    });

    //set mouseleave
    ticker.mouseleave(function() {

            //resume animation
    animator(ticker.children(":first"));

    });
      });
    </script>

我会非常感激!!

推荐答案

添加行分隔每个项目添加 border-bottom：1px solid black; 到css。

to add line to separate each items add border-bottom:1px solid black; to the css.

在阅读完你的问题后，我想向你展示我在我网站上使用的javascript方法，并在鼠标悬停时停止。

after read your question i would like to show you the javascript method that i used in my site and stops when mouse over.

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed"  onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

 <!--YOUR SCROLL CONTENT HERE-->

 <!--YOUR SCROLL CONTENT HERE-->

 </div>
 </div><style type="text/css">

 #marqueecontainer{
 position: relative;
  width: 200px; /*marquee width */
 height: 200px; /*marquee height */
  background-color: white;
 overflow: hidden;
 border: 3px solid orange;
 padding: 2px;
 padding-left: 4px;
 }

 </style>
<script type="text/javascript">

 var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
  var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
  var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

   var copyspeed=marqueespeed
   var pausespeed=(pauseit==0)? copyspeed: 0
   var actualheight=''

    function scrollmarquee(){
    if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
     cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" 
     else 
     cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
     }

     function initializemarquee(){
      cross_marquee=document.getElementById("vmarquee")
       cross_marquee.style.top=0
       marqueeheight=document.getElementById("marqueecontainer").offsetHeight
       actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
         if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
       cross_marquee.style.height=marqueeheight+"px"
      cross_marquee.style.overflow="scroll"
      return
       }
        setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
        }

     if (window.addEventListener)
      window.addEventListener("load", initializemarquee, false)
  else if (window.attachEvent)
     window.attachEvent("onload", initializemarquee)
   else if (document.getElementById)
     window.onload=initializemarquee


    </script>

您可以在这里

这篇关于滚动新闻自动收报机Jquery - 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！