Question

在一个简单的html标记中，我有一个选框标记。我有这样的代码

<marquee direction="left" scrolldelay="4" scrollamount="2" behavior="scroll">
    <a href="#">iPod Nano</a>
    <a href="#">iPod shuffle</a>
    <a href="#">MacBook</a>
    <a href="#">iPod touch</a>
</marquee>

在这里，我制作了一个jQuery来停止悬停的选取框，当我将从选框中移除悬停时再次滚动选框。为此，我制作了像这样的jQuery代码

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("marquee").hover(function(){
            this.stop();

        }, function() {
            this.start();
        });
    });
</script>

但是当鼠标悬停在外时，这并没有停止并开始。当我在firebug控制台选项卡中检查错误时，我得到了错误，如

TypeError: this.start is not a function
TypeError: this.stop is not a function

有人可以告诉我这是什么问题吗？任何帮助和建议都会非常明显。感谢

Answer 1

使用内联onmouseover="this.stop();"和onmouseout="this.start();使用这种简单的方法：

<marquee onmouseover="this.stop();" onmouseout="this.start();" direction="left" scrolldelay="4" scrollamount="2" behavior="scroll">
    <a href="#">iPod Nano</a>
    <a href="#">iPod shuffle</a>
    <a href="#">MacBook</a>
    <a href="#">iPod touch</a>
</marquee>

这是一个有效的 DEMO 。

希望它可以帮到你！

Answer 2

尝试使用$(this)代替this。而jquery中甚至没有start()方法。

此外，请勿使用字幕，因为它已被弃用！

Answer 3

这似乎可以使用JQuery，希望这可以帮助你。

<div class="demo">
    <marquee style="position: relative;" behavior="scroll" align="center" direction="up"      scrollamount="2" scrolldelay="5"  height="290"><br>
        <a href="#"> &bull; Rohir Naik  </a> <br><br>
        <a href="#"> &bull; Rohidas Naik  </a> <br><br>
        <a href="#"> &bull; Rohita Naik  </a> <br><br>
        <a href="#"> &bull; Omkar Naik  </a> <br><br>
    </marquee>
</div>

使用脚本

(function ($) {
$.fn.marquee = function (klass) {
    var newMarquee = [],
        last = this.length;

    // works out the left or right hand reset position, based on scroll
    // behavior, current direction and new direction
    function getReset(newDir, marqueeRedux, marqueeState) {
        var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
        var r = 0;
        if (behavior == 'alternate') {
            r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width;
        } else if (behavior == 'slide') {
            if (newDir == -1) {
                r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
            } else {
                r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0;
            }
        } else {
            r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
        }
        return r;
    }

    // single "thread" animation
    function animateMarquee() {
        var i = newMarquee.length,
            marqueeRedux = null,
            $marqueeRedux = null,
            marqueeState = {},
            newMarqueeList = [],
            hitedge = false;

        while (i--) {
            marqueeRedux = newMarquee[i];
            $marqueeRedux = $(marqueeRedux);
            marqueeState = $marqueeRedux.data('marqueeState');

            if ($marqueeRedux.data('paused') !== true) {
                // TODO read scrollamount, dir, behavior, loops and last from data
                marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);

                // only true if it's hit the end
                hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);

                if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {                        
                    if (marqueeState.behavior == 'alternate') {
                        marqueeState.dir *= -1; // flip
                    }
                    marqueeState.last = -1;

                    $marqueeRedux.trigger('stop');

                    marqueeState.loops--;
                    if (marqueeState.loops === 0) {
                        if (marqueeState.behavior != 'slide') {
                            marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
                        } else {
                            // corrects the position
                            marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
                        }

                        $marqueeRedux.trigger('end');
                    } else {
                        // keep this marquee going
                        newMarqueeList.push(marqueeRedux);
                        $marqueeRedux.trigger('start');
                        marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
                    }
                } else {
                    newMarqueeList.push(marqueeRedux);
                }
                marqueeState.last = marqueeRedux[marqueeState.axis];

                // store updated state only if we ran an animation
                $marqueeRedux.data('marqueeState', marqueeState);
            } else {
                // even though it's paused, keep it in the list
                newMarqueeList.push(marqueeRedux);                    
            }
        }

        newMarquee = newMarqueeList;

        if (newMarquee.length) {
            setTimeout(animateMarquee, 25);
        }            
    }

    // TODO consider whether using .html() in the wrapping process could lead to loosing predefined events...
    this.each(function (i) {
        var $marquee = $(this),
            width = $marquee.attr('width') || $marquee.width(),
            height = $marquee.attr('height') || $marquee.height(),
            $marqueeRedux = $marquee.after('<div ' + (klass ? 'class="' + klass + '" ' : '') + 'style="display: block-inline; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(),
            marqueeRedux = $marqueeRedux.get(0),
            hitedge = 0,
            direction = ($marquee.attr('direction') || 'left').toLowerCase(),
            marqueeState = {
                dir : /down|right/.test(direction) ? -1 : 1,
                axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
                widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
                last : -1,
                loops : $marquee.attr('loop') || -1,
                scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 2,
                behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(),
                width : /left|right/.test(direction) ? width : height
            };

        // corrects a bug in Firefox - the default loops for slide is -1
        if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') {
            marqueeState.loops = 1;
        }

        $marquee.remove();

        // add padding
        if (/left|right/.test(direction)) {
            $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
        } else {
            $marqueeRedux.find('> div').css('padding', height + 'px 0');
        }

        // events
        $marqueeRedux.bind('stop', function () {
            $marqueeRedux.data('paused', true);
        }).bind('pause', function () {
            $marqueeRedux.data('paused', true);
        }).bind('start', function () {
            $marqueeRedux.data('paused', false);
        }).bind('unpause', function () {
            $marqueeRedux.data('paused', false);
        }).data('marqueeState', marqueeState); // finally: store the state

        // todo - rerender event allowing us to do an ajax hit and redraw the marquee

        newMarquee.push(marqueeRedux);

        marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
        $marqueeRedux.trigger('start');

        // on the very last marquee, trigger the animation
        if (i+1 == last) {
            animateMarquee();
        }
    });            

    return $(newMarquee);
};
}(jQuery));

<!--
$(function () {
    // basic version is: $('div.demo marquee').marquee() - but we're doing some sexy extras

    $('div.demo marquee').marquee('pointer').mouseover(function () {
        $(this).trigger('stop');
    }).mouseout(function () {
        $(this).trigger('start');
    }).mousemove(function (event) {
        if ($(this).data('drag') == true) {
            this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
        }
    }).mousedown(function (event) {
        $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
    }).mouseup(function () {
        $(this).data('drag', false);
    });
});
//-->

<强> DEMO on JSFiddle

参考：http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

Answer 4

试试这个：

$('marquee').hover(function(){
    $(this).attr('scrollamount',0);
},function(){
    $(this).attr('scrollamount',5);
});


<marquee scrollamount="5"></marquee>

Answer 5

试试这个：

var marq = document.getElementsByTagName("marquee");
$("marquee li a").hover(function () { 
    marq[0].stop();
},function(){
    marq[0].start();
});

或者您可以使用getElementsByClass或getElementsByName或getElementsById

Answer 6

<marquee onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">
<a href="#">iPod Nano</a>
<a href="#">iPod shuffle</a>
<a href="#">MacBook</a>
<a href="#">iPod touch</a>
</marquee>

Answer 7

<marquee direction="left" scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);$(this).trigger('stop');" onmouseout="this.setAttribute('scrollamount', 3, 0);$(this).trigger('start');"> </marquee>

这一切都适用于Chrome和Firefox。

鼠标上的jQuery悬停在选框停止并开始没有做

7 个答案: