1

使用 jQuery 的 jquery 插件和 easing 插件。

我有一系列锚点，在一个列表中，它们都是固定的高度和宽度。在每个 div 中都有另一个我称为“内容”的内容，它是绝对定位的，当鼠标进入包含的 div 时，它会从底部滑入视图。当鼠标离开包含的 div 时，“内容”div 会滑出视图。

我有这个工作，使用顶部和底部值的组合，但这不能跨浏览器工作（据我所知，只能在 Firefox 中正常工作）。代码如下（html、css 和 javascript）：

<!doctype html>

<head>

    <style>

        .index {
            float: left;
            margin: 0 0 30px 0;
            margin-left: 0;
            padding: 0;
            position: relative;
            }
        .index li {
            border: 2px solid #f3f3f3;
            float: left;
            list-style: none;
            font-family:"Helvetica";
            font-size:14px;
            font-weight:normal;
            margin: 0 10px 10px 0;
            padding: 1px;
            position: relative;
            }
        .index li a {
            float: left;
            height: 126px;
            overflow: hidden;
            position: relative;
            width: 224px;
            }
        .index li img {
            display: block;
            }
        .index li .content {
            background: #f7f7f7;
            bottom: auto;
            display: block;
            margin: 0;
            padding: 10px 0 3px;
            position: absolute;
            top: 132px;
            width: 224px;
            }
        .index li a:hover .content {
            bottom: 0;
            top: auto;
            }
        .index .content h3 {
            background: url(../img/content/arw-sma.png) no-repeat 0 -100px;
            color: #666;
            margin: 0 10px 1px;
            padding-left: 20px;
            }   
        .index .content p {
            color: #999;
            display: block;
            float: left;
            font-size: 12px;
            margin: 0 10px 2px;
            padding: 0;
            }

    </style>

    <script src="js//jquery-1.6.2.min.js"></script>
    <script src="js/jquery.easing.js"></script>

    <script type="text/javascript">
        $(function(){
        $('.index .content').css( {'top':'132px', 'bottom':'auto'});
        $('.index li a').hover(
                function(){
                    $(this).find('img').animate({'opacity': '.7'}, 200);        
                    $(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});      
                }, 
                function(){
                    $(this).find('img').animate({'opacity': '1.0'}, 200);                   
                    $(this).find('.content').animate({'top':'132px'}, 150);
                }       
            );
        });
    </script>

</head>

<body>

    <ul class="index panel">
        <li>
            <a href="#" title="TITLE TEXT.">
                <img src="thumb-1.jpg" alt="ALT TEXT." />
                <div class="content">
                    <h3>Title Here</h3>
                    <p>Other content goes here</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" title="TITLE TEXT.">
                <img src="thumb-1.jpg" alt="ALT TEXT." />
                <div class="content">
                    <h3>Title Here</h3>
                    <p>Other content goes here</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" title="TITLE TEXT.">
                <img src="thumb-1.jpg" alt="ALT TEXT." />
                <div class="content">
                    <h3>Title Here</h3>
                    <p>Other content goes here</p>
                </div>
            </a>
        </li>
    </ul>

</body>

不同的浏览器不喜欢同时使用顶部和底部值。所以理想情况下，我猜我只需要使用'top'。问题是，我不知道'content div'会有多高，所以我不能设置一个明确的值，好像它更高，它会切断一些内容。

因为我知道锚点的高度为 126 像素。我一直在尝试使用 .height() 来检测“内容 div”的高度。然后从 126 中减去这个值——这将留下我需要将“top”设置为的值，以将其定位在 div 中。

这听起来合理吗，我说得通吗？希望这不是冗长的，只是想尽可能详细。

希望有人可以提供帮助，我喜欢您的回复！

4

1 回答 1

1

演示 jsBin

  • 使用SPAN而不是DIV（DIV 是块级元素，AFAIK 它不会验证您的文档。）

  • 您可以设置一个初始底部值，例如 -132...-150 ...或任何您喜欢的.content

    .index li .content {
    background: #f7f7f7;
    bottom: -132px;
    display: block;
    margin: 0;
    padding: 10px 0 3px;
    position: absolute;
    top: 132px;
    width: 224px;
}

问：

   $(function(){
    $('.panel li a').hover(
            function(){
                $(this).find('img').animate({'opacity': '.7'}, 200);        
                $(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});      
            }, 
            function(){
                $(this).find('img').animate({'opacity': '1.0'}, 200);                   
                $(this).find('.content').animate({'bottom':'-132px'}, 150);
            }       
        );
    });

我将使用的另一个解决方案是：在 DOM 准备就绪时，计算每个内容高度 ( var outerH = $(this).outerHeight(true)) 并将该值设置data-height为每个元素的 a。( $(this).data('height', outerH);)。比您可以在悬停时为存储在该元素中的确切N设置动画。pxdata-height

于 2012-05-20T16:35:13.847 回答