如何将Div推到动画旁边?

时间:2012-10-22 18:39:15

标签: jquery css css-float

您好,我一直在尝试一切无济于事。我正在使用jQuery Interface脚本,它在mack Dock上创建了一个鱼眼效果。它工作得很好很棒。我希望在停靠点效果发生时将另一个图像或div放在靠近底座的位置。现在,图像只是位于码头下方,只是略微移动。我有内联样式,花车等,请看这里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'
                }
            )
        }
    );

感谢!!!

0 个答案:

没有答案