Проблема с обменом изображениями класса li и скольжением jQuery при наведении курсора - PullRequest
Новая
       46

Проблема с обменом изображениями класса li и скольжением jQuery при наведении курсора

0 голосов
/ 17 июня 2011

Извините, если это вводит в заблуждение, я довольно новичок в Java-скрипт и jQuery.Может кто-нибудь сказать мне, как сделать, чтобы навигационная ссылка скользила влево при наведении курсора мыши и обратно при наведении курсора мыши?В этом скрипте галерея изображений swap используется классы li, которые я пытаюсь раздвинуть при наведении мыши.У меня есть левая навигационная плоскость с изображениями, которая изменит соответствующее изображение на право при наведении.

<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>

li классы, содержащиеся в $("#gallery ul li img").hover(function(){, - это то, что я хочу скользить индивидуально при наведении курсора мыши и обратно при наведении мыши.Я пытался 

$("##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;
}

1 Ответ

0 голосов
/ 17 июня 2011

используйте это для вашего наведения: 

$("#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 с добавленной анимацией.

...