0

我试图让我页面上的缩略图在单击时“动画”到位。到目前为止它不起作用，但我不知道为什么或如何。有人可以提供对此的见解吗？我正在尝试使用“clicky”功能来做到这一点。基本上，我需要小缩略图在页面上的正确位置（基本上是页面的中间顶部）“增长”成正确的大小。谢谢！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Farm Animals</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js"> 
    </script>    
    <script>


$('#cluster').hover(function(){
    $(this).closest('cluster').css('display', 'block');
        $(this).closest('cluster').css({ opacity: 1 });
},
function(){
    $(this).closest('cluster').css('display', 'none');
        $(this).closest('cluster').css({ opacity: 0.5 });
}); 

        function hilite(a)
        {

      a.mouseOver(function(){$("#cluster").fadeTo("slow",.5);

        }

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

    function imgFade() 
    {
    $('#cluster, #launch, #gas').fadeTo(0, .3);
    }

$(document).ready(function () {
    $("#cluster, #launch, #gas")
       .mouseover(function () {
          $(this).fadeTo("slow", 1);
       })
       .mouseout(function () {
          $(this).fadeTo("slow", .3);
       });
});

    function clicky(something)
    {
        var t = $(something);
        t.animate({right:"150px",top:"150px"},2000);

    }



        function showImage(clickImg)
        {
            var dest = document.getElementById("dest");
            dest.src=clickImg.src;
            dest.alt=clickImg.alt;
            var descr = document.getElementById("descr")
            if (clickImg.alt == "cluster")
            {
                descr.innerHTML = holsteinDescr;
            }    
            if (clickImg.alt == "gas")
            {
                descr.innerHTML = herefordDescr;
            } 
            if (clickImg.alt == "launch")
                descr.innerHTML = pigDescr;  
        }

        function hilite()
        {
            $("#cluster").fadeIn("slow");
        }

        function lolite(x)
        {
            x.style.borderWidth = "0px";
        }

    </script>
    <style type="text/css">
        .clickable  { cursor:pointer; height:50px; width:50px}
        .thumbTD    { width:60px; height:60px }
        caption     { font-size:18pt; }
        table       { border:0px }
        #dest       { width:400px; height:400px }
        #descr      { width:420px }
        #leftColumn { vertical-align:top }
    </style>
  </head>
  <body onload="imgFade()">
    <table>
        <caption>Select image on left for more information.</caption>
        <tr>
            <td id="leftColumn">
                <table id ="ta">
                    <tr>
                        <td class="thumbTD">
                            <img id="cluster" class="clickable" onmouseover="hilite(this);" onmouseout="lolite
(this);" onclick="showImage(this);clicky=(this)" src="cluster.png" alt="holstein"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="thumbTD">
                            <img id="gas" class="clickable" onmouseover="hilite(this);" onmouseout="lolite(this);" 
onclick="showImage(this)" src="gas.png" alt="hereford" />
                        </td>
                    </tr>
                    <tr>
                        <td class="thumbTD">
                            <img id="launch" class="clickable" onmouseover="hilite(this);" onmouseout="lolite
(this);" onclick="showImage(this)" src="launch.jpg" alt="pig" />
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <td><img id="dest" src="blank.jpg" alt="blank" /></td>
                    </tr>
                    <tr>
                        <td id="descr" >&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
  </body>
</html>
4

1 回答 1

0

首先，您在全局空间中有两个名为 hilite 的函数。改变他们的名字之一。其次，在其中一个中，您有以下代码：

    a.mouseOver(function(){$("#cluster").fadeTo("slow",.5);

您需要关闭该功能。此外，它的鼠标悬停，而不是鼠标悬停。此外，您经常使用非 jquery 对象调用它。要解决这些问题，请使用：

    $(a).mouseover(function(){$("#cluster").fadeTo("slow",0.5);});

您可能还有其他问题。如果您提供图像的完整链接以便我可以测试您的代码，这可能会更容易。

于 2013-10-26T22:26:57.867 回答