0

javascript/jquery を作成して、ホバーしたときに

  • 「左」、「中央」、「右」の画像があるため、2 つまたは 3 つのクラスがホバリング画像として呼び出されます。左右は固定幅になりますが、真ん中は残り幅のサイズに合わせて大きくする必要があります。

    ラバランプ効果を使用してみましたが、移動機能を停止するのは奇妙に見えますが、考えられる/達成できるのはそれだけです。しかし、その後、「ホバー」画像をフェードインおよびフェードアウトさせたいという別の問題に遭遇しました。

    このメニューを見ることができます。これは、私がこれまでに達成したものです - http://valkesh.000space.com

    基本的にコードは次のとおりです-

    <style type="text/css">
ul.nav { list-style:none;  overflow:hidden;  }
ul.nav li { float:left; height:39px; background-color:#666666;  padding:0 5px;  }
ul.nav li.last { -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; 
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;
}
ul.nav li.bg { margin:7px 0px 0px 3px; padding-right:8px; position:absolute; z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top; }
ul.nav li .left{ background:url(bg.png) no-repeat left top; height:39px;  }
ul.nav li a {padding:8px 20px;  color:#000000; font-size:18px; font-weight:bold; display:block; text-decoration:none; z-index:100; position:relative; }

</style>

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
   $('#nav1 li.bg').css({opacity: 0, visibility: "visible"});   

    $('#nav1 li a').hover(function()
    {
        var offset=$(this).offset();
        var thiswidth =$(this).width()+13;
        $('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},100);  
        $('#nav1 li.bg').css({opacity: 0, visibility: "visible"}).animate({opacity: 100});   
    },
    function()
    {
        $('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},100); 
        $('#nav1 li.bg').css({opacity: 0, visibility: "visible"});   
    });    
});
</script>
<body>

<div class="menucontainer" style="margin-top:15px;">
   <ul class="nav" id="nav1">
        <li><a href="#">Home</a></li>   
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact Us</a></li> 
        <li class="bg"><div class="left"></div></li>    
   </ul>
</div>
</body>

    誰かが少なくとも2つまたは3つの画像でホバーを行うように私を案内していただければ幸いです

    ありがとう

    • 4

    1 に答える 1

    0

    このコードを試してみてください。あなたが望んでいたことをすることができたと思います。私はあなたのフェードインとフェードアウトのアニメーションを引き出して、それらを別のホバーに入れました（ 用<ul>）。CSS や HTML には触れていません。

    $(document).ready(function(){
 $('#nav1 li.bg').css({opacity: 0, visibility: "visible"});

 $('#nav1').hover(function(){
  $('#nav1 li.bg').animate({opacity: 1, visibility: "visible"},400);
 }, function(){
  $('#nav1 li.bg').animate({opacity: 0, visibility: "hidden"},400);
 })
 $('#nav1 li a').hover(function(){
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav1 li.bg').animate({left:offset.left+"px",width:thiswidth+"px"},100);
 }, function(){
  $('#nav1 li.bg').animate({left:offset.left+"px",width:"60px"},100);       
 });
})
    于 2009-11-28T19:36:23.387 に答える