Question

我正在使用脚本 - 用于标签内容区域内的非常小的图片库。

我正在使用; http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/但是已经定制了几乎四分之一的大小，只有3个图像，并且重新排列以使拇指直接位于“主视图”图像区域下方。我已成功完成，视觉上很棒。

拇指约为50像素，在悬停时可以扩展到约60像素，点击时 - 主视图区域的图像也是正确的。

问题是，并且非常奇怪，因为我一遍又一遍地使用这个脚本 - 由于某种原因，3个拇指的参数也在主视图上方重复 - 但实际图像不可见。当用户将鼠标放在主视图上方 - 在50px 60px方形/矩形参数之间的任何位置时 - 会出现下面图像的悬停。

我一直在仔细阅读代码 - 我知道这有点蠢 - 如果有人能给我一个很棒的建议。

以下是该情况的屏幕截图 - 检查出来; http://tinypic.com/r/2nt8o7t/7

加价：

<!-- Thumb Gall Mark-Up -->

<div class="containerslide">

<ul class="thumb">

    <li><a href="img/appimg_1.jpg"><img src="img/appimg_1.jpg" alt="" /></a></li>
    <li><a href="img/appimg_2.jpg"><img src="img/appimg_2.jpg" alt="" /></a></li>
    <li><a href="img/appimg_3.jpg"><img src="img/appimg_3.jpg" alt="" /></a></li>


</ul>

<div id="main_view">

    <img src="img/appimg_1.jpg" alt="" /></a><br />

</div>
</div>

<!--End Thumb Gall Mark-Up-->

查询：

        <script src="js/modernizr.custom.37797.js"></script> 

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
        .animate({
            marginTop: '0px', 
            marginLeft: '0',
            top: '360px', 
            left: '0',  
            width: '65px', 
            overflow: 'hidden',
            height: '80px',
            padding: '3px' 
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '360px', 
            left: '0', 
            width: '60px', 
            overflow: 'hidden',
            height: '60px', 
            padding: '3px'
        }, 200);
});

//Swap Image on Click
    $("ul.thumb li a").click(function() {

        var mainImage = $(this).attr("href"); //Find Image Name
        $("#main_view img").attr({ src: mainImage });
        return false;       
    });

});
</script>

CSS;

<!--minSlide Show Styles -->

* { padding: 0;}
img {border: none;}
.containerslide {
    margin-top: -71px;
}

ul.thumb {
    float: left;
    list-style: none outside none;
    padding: 12px;
    width: 360px;
}

ul.thumb {
    width: 360px;

}


ul.thumb li {
    padding: 3px;
    float: left;
    position: relative;
    width: 60px;
    height: 60px;

}
ul.thumb li img {
    width: 60px; height: 60px;
    border: 1px solid #ddd;
    padding: 3px;
    background: #f0f0f0;
    position: absolute;
    left: 0; 
    -ms-interpolation-mode: bicubic; 
    margin-top: 365px;

}
ul.thumb li img.hover {
    background:url(thumb_bg.png) no-repeat center center;
    border: none;


}
#main_view {
    float: left;
    margin-left: -217px;
    margin-top: 41px;
    padding: 9px 0;
}




<!-- End Slide Show Styles -->

Answer 1

我在这里看到了一个不必要的a标签，

<div id="main_view">

    <img src="img/appimg_1.jpg" alt="" /></a><br />

</div>

这是做什么的。也许这会造成一个问题并扰乱整个剧本，如果问题仍然存在，请发一个小提琴。

花式缩略图悬停效果

1 个答案: