Question

很抱歉，如果这是误导性的，我是Java-script和jQuery的新手。任何人都可以告诉我如何在鼠标悬停时向左滑动导航链接并在鼠标移动时向后滑动？我试图在鼠标悬停时单独滑动的li类在此gallery image swap脚本中使用。我有一个带有图像的左导航平面，可以在悬停时将相应的图像更改为右侧。

<script type>
$(document).ready(function() {
    // Image swap on hover
    $("#gallery ul li img").hover(function(){
      $('#main-img').attr('src',$(this).attr('src').replace('thumb/',    
      '')).stop().hide().fadeTo("slow",1);
    });
    // Image preload
    var imgSwap = [];
     $("#gallery ul li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
</script>

$("#gallery ul li img").hover(function(){中包含的

li类是我想在鼠标悬停和鼠标悬停时单独滑动的。我试过了

$("##gallery ul li img").hover(function(){
   $("gallery ul.home", this).stop().animate({left:"150px"},{queue:false,duration:200});
}, function() {
   $("gallery ul.home", this).stop().animate({right:"0px"},{queue:false,duration:200});

但这似乎打破了.hover(function(){

HTML：

<div id="gallery">
<img src="images/gallery/home.png" alt="" id="main-img" />
  <ul>
   <li class="home"><img src="images/gallery/thumb/home.png" alt="" /></li>
   <li class="about"><img src="images/gallery/thumb/About Us.png" alt="" /></li>
   <li class="contact"><img src="images/gallery/thumb/Contact Us.png" alt="" /></li>
   <li class="services"><img src="images/gallery/thumb/Services.png" alt="" /></li>
  </ul>
</div>

CSS：

#body #left_nav #gallery #main-img {
    position: absolute;
    left: 400px;
    top: 20px;
    right: auto;
    bottom: auto;
}
#body #left_nav #links #gallery ul li{
    display: inline;
    clip: rect(auto,3px,auto,auto);
    height: 500px;
    width: 300px;
}
#body #left_nav #gallery ul .home {
    position: absolute;
    left: 117px;
    top: 74px;
    list-style-image: none;
    list-style-type: none;
}
#body #left_nav #gallery ul .about {
    position: absolute;
    left: 88px;
    top: 176px;
    list-style-image: none;
    list-style-type: none;
}
#body #left_nav #gallery ul .contact {
    position: absolute;
    left: 80px;
    top: 277px;
    list-style-image: none;
    list-style-type: none;
}
#body #left_nav #gallery ul .services {
    position: absolute;
    top: 385px;
    list-style-image: none;
    list-style-type: none;
    left: 98px;
}

Answer 1

将此用于悬停：

$("#gallery ul li img").hover(function(){
      $('#main-img').attr('src',$(this).attr('src').replace('thumb/',''))
          .stop()
          .show("slide");
    },function(){
      $('#main-img').stop().hide("slide");
});

另外请确保您的页面上有jquery ui脚本，否则这将无效。

你的预装需要：

$.fn.preload = function() {
    this.each(function(index) {
        $('<img/>')[0].src = this[index];
    });
};

编辑以为我会给你一些轻松的阅读：http://docs.jquery.com/UI/Effects/Slide

编辑2： http://jsfiddle.net/kFBby/5/ jsFiddle添加动画。

鼠标悬停时li类图像交换和jQuery幻灯片的问题

1 个答案: