javascript - 为什么我的 CSS 鱼眼停靠栏菜单不起作用？

Question

我的 CSS 鱼眼停靠栏菜单无法正常工作。我正在尝试将其实现到我的 wordpress 网站中。我是从http://ndesign-studio.com/blog/css-dock-menu下载的.我更改了一些 css 以将其定位在页脚下方底部容器 div 内的页面上，但鱼眼效果不起作用。谁能帮帮我？

HTML:

<!--bottom dock - fisheye menu -->
<div class="dock" id="dock2">
  <div class="dock-container2" style="left: 760px; width: 400px;">
<a class="dock-item2" style="left: 0px; width: 40px;" href="http://www.linkedin.com/company/ostech-pty-ltd."><span style="display: none;">LinkedIn</span><img src="/wp-content/themes/bluefantasy/images/LinkedIn_icon.png" alt="LinkedIn"></a>
<a class="dock-item2" style="left: 40px; width: 40px;" href="https://www.facebook.com/OSTechCorp"><span style="display: none;">Facebook</span><img src="/wp-content/themes/bluefantasy/images/facebook_icon.png" alt="Facebook"></a>
<a class="dock-item2" style="left: 80px; width: 40px;" href="https://twitter.com/ostech"><span style="display: none;">Twitter</span><img src="/wp-content/themes/bluefantasy/images/Twitter_icon.png" alt="Twitter"></a>
  </div>
</div>

CSS:

#dock2 {
    width: 100%;
    bottom: 0px;
    color: #000;
    left: 0px;

}
.dock-container2 {

    height: 50px;
    background: #000000;
    padding-left: 20px;
    vertical-align: middle;

}
a.dock-item2 {
    display: block; 
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px; 
    color: #000; 
    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%; 
}
#wrap {

    width: 980px;

    height: auto;

    margin-right: auto;

    margin-left: auto;

    overflow: hidden;

    position:relative;



}

正文中的javascript:

<script type="text/javascript">
    $(document).ready(
        function()
        {

            $('#dock2').Fisheye(
                {
                    maxWidth: 30,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );
</script>

还有两个外部脚本jquery.js和interface.js。

Answer 1

用下面的代码替换你的 block :

<script type="text/javascript">

var AddFishEye = function(){
          $('#dock2').Fisheye(
                {
                    maxWidth: 30,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            );
    };

$(document).ready(function(){
   AddFishEye(); 
});

</script>

更新

此外，您还需要对 CSS 进行一些更改:

#dock2 {
    width: 100%;
    bottom: 0px;
    color: #000;
    left: 0px;
    position:absolute;

}
.dock-container2 {
position:absolute;
    height: 50px;
    background: #000000;
    padding-left: 20px;
    vertical-align: middle;

}
a.dock-item2 {
    display: block; 
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px; 
    color: #000; 
    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%; 
}
#wrap {

    width: 980px;

    height: auto;

    margin-right: auto;

    margin-left: auto;

    overflow: hidden;

    position:relative;

}

她的 fiddle 演示:

http://jsfiddle.net/sunnykumar08/u7qX2/