代码之家 › 专栏 › 技术社区 › Gublooo

jqueryspy-文本的垂直自动滚动-如何设置动态高度

jquery-ui css

Gublooo · 技术社区 · 16 年前

我用这段代码来显示我的网站上最新的用户评论-一些评论是1行,其他的更长。

http://jqueryfordesigners.com/demo/simple-spy.html

如果你看源代码-高度设置为90px和溢出设置为隐藏

#sidebar li {
    height: 90px;
    overflow: hidden;
}

现在我想在这里显示整个文本-所以我将overflow属性改为visible。

由于高度设置为90px,如果任何注释较长,它将覆盖上一个条目-这意味着您可以在上一个条目的顶部看到此长条目的最后一行。

这只发生在IE浏览器-在chrome-它自动调整高度。

我不能将height属性改为auto或其他一些在脚本中用于创建滚动效果的属性。

谢谢

1 回复 | 直到 16 年前

Zuul KrapocK 16 年前

你试过把css设置为min吗-height:90px ? 像这样,它将有90像素,如果一行文字是必需的,但如果更多的是必需的,它将增长流体!

编辑——工作示例:

好的,下面是经过正确测试的完整代码(就像我给你做的工具一样,只需设置最小高度,就可以了:)(很抱歉耽搁了,但是我非常忙…:/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Simply Spy</title>
<style type="text/css" media="screen">
<!--

/* Style and images take for example purposes only from http://www.quicksnapper.com */

body { font: 1em "Lucida Grande",Lucida,Verdana,sans-serif; font-size: 62.5%; line-height: 1;}
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; }
p { margin: 0; margin-bottom: 4px;}
h5 { margin: 0; font-weight: normal; }
a:link,
a:hover,
a:visited {
    color: #fff;
}
#sidebar {
    color: #AFB0B1;
    background: #0D171A;
    float:left;
    margin:0 0 24px;
    padding:15px 10px 10px;
    width:300px;
}

#sidebar ul {
    font-size:1.2em;
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
}

.rating {
    background-image:url(http://static.jqueryfordesigners.com/demo/images/simple-spy/info_bar_stars.png);
    background-repeat:no-repeat;
    height:12px;
    text-indent:-900em;
    font-size:1em;
    margin:0 0 9px;
}

.none {
        background-position: 82px 0px;
}

.four {
        background-position: 82px -48px;
}

.five {
        background-position: 82px -60px;
}

.tags {
        color: #fff;
        margin: 0.5em;
}

.tags a,
.tags span {
        background-color: #333839;
        font-size: 0.8em;
        padding: 0.1em 0.8em 0.2em;
}

.tags a:link,
.tags a:visited {
        color: #fff;
        text-decoration: none;
}

.tags a:hover,
.tags a:active {
        background-color: #3e4448;
        color: #fff;
        text-decoration: none;
}

#sidebar li {
    min-height: 90px;
    overflow: hidden;
}

#sidebar li h5 {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#sidebar li h5 a {
    color:#A5A9AB;
    text-decoration:none;
}

#sidebar li img {
    float:left;
    margin-right:8px;
}

#sidebar li .info {
    color:#3E4548;
    font-size:1em;
}

#sidebar .info a,
#sidebar .info a:visited {
    color:#3E4548;
    text-decoration: none;
}

#sidebar .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#sidebar {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
}

.tags span,
.tags a {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8">
$(function () {
    $('ul.spy').simpleSpy().bind('mouseenter', function () {
        $(this).trigger('stop');
    }).bind('mouseleave', function () {
        $(this).trigger('start');
    });
});

(function ($) {

$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 4;
    interval = interval || 4000;

    function getSpyItem($source) {
        var $items = $source.find('> li');

        if ($items.length == 1) {
            // do an hit to get some more
            $source.load('ajax-spy-helper.php');
        } else if ($items.length == 0) {
            return false;
        }

        // grab the first item, and remove it from the $source
        return $items.filter(':first').remove();
    }

    return this.each(function () {
        // 1. setup
            // capture a cache of all the list items
            // chomp the list down to limit li elements
        var $list = $(this),
            running = true,
            height = $list.find('> li:first').height();

        // TODO create the $source element....
        var $source = $('<ul />').hide().appendTo('body');

        $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });

        $list.find('> li').filter(':gt(' + (limit - 1) + ')').appendTo($source);

        $list.bind('stop', function () {
            running = false;
        }).bind('start', function () {
            running = true;
        });

        // 2. effect
        function spy() {
            if (running) {
                var $item = getSpyItem($source);

                if ($item != false) {
                    // insert a new item with opacity and height of zero
                    var $insert = $item.css({
                        height : 0,
                        opacity : 0,
                        display : 'none'
                    }).prependTo($list);

                    // fade the LAST item out
                    $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
                        // increase the height of the NEW first item
                        $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

                        // AND at the same time - decrease the height of the LAST item
                        // $(this).animate({ height : 0 }, 1000, function () {
                            // finally fade the first item in (and we can remove the last)
                            $(this).remove();
                        // });
                    });
                }
            }

            setTimeout(spy, interval);
        }

        spy();
    });
};

})(jQuery);



</script>
</head>
<body>
    <h1>Simple Spy</h1>

    <div id="sidebar">
        <ul class="spy">
                <li>
                        <a href="#" title="View round"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a>
                        <h5><a href="#" title="View round">round</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>

                        <p class="tags"></p>
                </li>
                <li>
                        <a href="#" title="View round"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a>
                        <h5><a href="#" title="View round">round</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating none'>Not Rated</p>

                        <p class="tags"></p>
                </li>
                <li>
                        <a href="#" title="View round"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a>
                        <h5><a href="#" title="View round">round</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating none'>Not Rated</p>

                        <p class="tags"></p>
                </li>
                <li>
                        <a href="#" title="View round"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a>
                        <h5><a href="#" title="View round">round</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>

                        <p class="tags"></p>
                </li>

                <li>

                        <a href="#" title="View reflet"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/2.png" title="" /></a>
                        <h5><a href="#" title="View reflet">reflet</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>

                        <p class='rating none'>Not Rated</p>
                        <p class="tags"><a href="#" title='Find more images tagged Tactile'>Tactile</a></p>
                </li>

                <li>

                        <a href="#" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/3.png" title="" /></a>
                        <h5><a href="#" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>

                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating four'>Four Stars</p>
                        <p class='rating four'>Four Stars</p>
                        <p class="tags"><a href="#" title='Find more images tagged Kate Moross'>Kate Moross</a></p>
                </li>

                <li>

                        <a href="#" title="View Untitled"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/4.png" title="" /></a>

                        <h5><a href="#" title="View Untitled">Untitled</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit mike1052's userpage.">mike1052</a></p>
                        <p class='rating none'>Not Rated ah ad hfdsa fhjad jf adjf ad fja dj ad fj adfj ad j ad ja dj ad ja dj ad j ad ja dj ad j</p>
                        <p class="tags"></p>
                </li>

                <li>

                        <a href="#" title="View My Tutorial's Library"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/5.png" title="" /></a>
                        <h5><a href="#" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit FrancescoOnAir's userpage.">FrancescoOnAir</a></p>
                        <p class='rating five'>Five Stars</p>
                        <p class="tags"></p>
                </li>
        </ul>
    </div>
</body>
</html>

我还没有形成良好的视觉外观风格,但正如你所看到的,有些项目是更大的其他:)

只需将代码复制到.html文件并查看它!