0

我需要在不指定时间间隔的情况下使用 jquery 在鼠标悬停中停止多个图像在圆圈中的旋转。我尝试了两种方式。

1. stops the one image using the div id in hover.   
$(document).ready(function() {
    $('#friends2').hover(function() {
                   $(this).stop();  
                     }, function() {
                       moveit(); 
                   });

2. created a common class id 'a' for images and the stops in hover.  
$(document).ready(function() {
$('.a').hover(function() {
               $(this).stop();  
               }, function() {
                   moveit();
               });
my script as 

  <script type="text/javascript">
    var p = 0;     

    function moveit() {
    p += .01;

    var r = 165;
    var xcenter = 550;
    var ycenter = 300;


    var newLeft = Math.floor(xcenter + (r* Math.cos(p+90)));
    var newTop = Math.floor(ycenter + (r * Math.sin(p+90)));

    var newLeft1 = Math.floor(xcenter + -(r* Math.cos(p+120)));
    var newTop1 = Math.floor(ycenter + -(r * Math.sin(p+120)));

    var newLeft2 = Math.floor(xcenter + (r* Math.cos(p+390)));
    var newTop2 = Math.floor(ycenter + (r * Math.sin(p+390)));

    $('#friends').animate({  
            top: newTop,
            left: newLeft,
        }, 10, function() {
            moveit();
           });
    $('#friends2').animate({
        top: newTop1,
        left: newLeft1,
    },10, function() {
        moveit();
    });
    $('#friends3').animate({
        top: newTop2,
        left: newLeft2,
    },10, function() {
        moveit();
    });
 }

问题是悬停不适用于所有图像..还有其他方法..建议吗？

4

2 回答 2

1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            setInterval(function () { moveit(); }, 10);

            $('[id^=friends]').hover(function () {
                $(this).addClass('Stop');
            }, function () {
                $(this).removeClass('Stop');
            });

            var p = 0;

            function moveit() {
                if ($('img.a.Stop').length === 0) {
                    p += .01;
                    var r = 165;
                    var xcenter = 550;
                    var ycenter = 300;

                    var newLeft = Math.floor(xcenter + (r * Math.cos(p + 90)));
                    var newTop = Math.floor(ycenter + (r * Math.sin(p + 90)));

                    var newLeft1 = Math.floor(xcenter + -(r * Math.cos(p + 120)));
                    var newTop1 = Math.floor(ycenter + -(r * Math.sin(p + 120)));

                    var newLeft2 = Math.floor(xcenter + (r * Math.cos(p + 390)));
                    var newTop2 = Math.floor(ycenter + (r * Math.sin(p + 390)));

                    $('#friends1').animate({
                        top: newTop,
                        left: newLeft
                    }, 10);

                    $('#friends2').animate({
                        top: newTop1,
                        left: newLeft1
                    }, 10);

                    $('#friends3').animate({
                        top: newTop2,
                        left: newLeft2
                    }, 10);
                }
            }
        });
    </script>
    <style type="text/css">
    .a
        {
        width:100px; 
        heigth:100px;
        position: relative;
    }
    </style>
</head>
<body>
    <img alt="" class="a" id="friends1" src="http://www.imageurlhost.com/images/uffodkj65ykm87t1twcn.jpg" />
    <br />
    <img alt="" class="a" id="friends2" src="http://www.imageurlhost.com/images/w6ozdx840xmlvgzo6mt4.jpg" />
    <br />
    <img alt="" class="a" id="friends3" src="http://www.imageurlhost.com/images/i0ndbnhlg0zfvnyxrgd.jpg" />
</body>
</html>
于 2012-05-14T12:25:16.273 回答
0 
$("[id^='friends']").on({
    mouseenter: function() {
       $(this).stop();
    },
    mouseleave: function() {
       moveit();
    }
});
于 2012-05-14T12:23:05.307 回答