0

嗨，我一直在尝试一切无济于事。我正在使用 jQuery 界面脚本，它在悬停 ala the mack Dock 上创建鱼眼效果。它工作得很好。我想有另一个图像或 div 位于停靠栏旁边的内联，当停靠栏效果发生时会被推倒。现在，图像仅位于底座下方并且仅略微移动。我有 trin 内联样式、浮动等请参见此处http://kerrydean.ca/new_layout.html

这是CSS

#dock_wrap {
    position: relative;
    z-index: 15;
    margin-top:25px;
    text-align: center;
}
#dock2 {
    width: 100%;
    bottom: 0px;
    position: absolute;
    left: 0px;
    z-index: 3;
}
.dock-container2 {
    position: absolute;
    height: 70px;
    background: url(images/dock-bg.gif);
    padding-left: 20px;
}
a.dock-item2 {
    display: block; 
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px; 
    color: #4C215B; 
    bottom: 0px; 
    position: absolute;
    text-align: center;
    text-decoration: none;
}
.dock-item2 span {
    display: none;
    padding-left: 20px;
}
.dock-item2 img {
    border: none; 
    margin: 5px 10px 0px; 
    width: 100%; 
}

这是HTML

<div id="dock_wrap">
        <div class="dock" id="dock2">
        <div class="dock-container2">
          <div><img src="kd_images/Kerry_Dean_Nav_1.jpg" width="264" height="70" /></div>
          <a class="dock-item2" href="blog.php"><span>Home</span><img src="kd_images/home.png" alt="home" /></a> <a class="dock-item2" href="kerry_on.html"><span>Kerry On</span><img src="kd_images/kerry_on.png" alt="kerry on" /></a>
          <a href="http://www.facebook.com/profile.php?id=100000414102424" target="_blank" class="dock-item2"><span>Facebook</span><img src="kd_images/facebook.png" alt="contact" /></a> 
          <a href="http://twitter.com/kerrydeandotca" target="_blank" class="dock-item2"><span>Twitter</span><img src="kd_images/twitter.png" alt="video" /></a> 
          <a href="http://www.youtube.com/user/KerryDeanChocolate" target="_blank" class="dock-item2"><span>Youtube</span><img src="kd_images/youtube.png" alt="music" /></a> 
          <a href="http://chocolatebiztools.soundconcepts.com/index.php/chocolate-tastings-101-2nd-edition.html" target="_blank" class="dock-item2"><span>Buy Kerry's CD</span><img src="kd_images/cd.png" alt="video" /></a> 
          <a class="dock-item2" href="photos.html"><span>Photos</span><img src="kd_images/camera.png" alt="home" /></a> </div>
        </div>
    </div>
      <!-- end of dock wrap -->

这是JQuery

$(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 35,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

谢谢！！！

4

0 回答 0