Css Jquery Spy-文本的垂直自动滚动-如何设置动态高度_Css_Jquery Ui

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

css jquery-ui

Css Jquery Spy-文本的垂直自动滚动-如何设置动态高度,css,jquery-ui,Css,Jquery Ui,我使用这段代码在我的网站上显示最新的用户评论-一些评论是1行，其他的更长如果查看源代码，高度设置为90px，溢出设置为隐藏 #sidebar li { height: 90px; overflow: hidden; } #侧边栏李{ 高度：90px；溢出：隐藏； } 现在我想在这里显示整个文本-因此我将溢出属性更改为可见由于高度设置为90px，如果任何注释较长，则其将覆盖上一个条目-这意味着您可以在上一个条目的顶部看到此长条目的最后一行这只发生在IE浏览器中-在chro

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

如果查看源代码，高度设置为90px，溢出设置为隐藏

#sidebar li { height: 90px; overflow: hidden; } #侧边栏李{ 高度：90px；溢出：隐藏； } 现在我想在这里显示整个文本-因此我将溢出属性更改为可见

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

这只发生在IE浏览器中-在chrome中-它会自动调整高度。我的一个选择是将高度从90px增加到130px，但这不是一个好的解决方案，因为只有一行的条目将有如此多的空格，更长的条目可能仍然超过130px的高度限制

我无法将该高度属性更改为“自动”或其他，因为脚本中正在使用该属性创建滚动效果

有没有办法在IE中解决这个问题

谢谢

您是否尝试将css设置为最小高度：90px？像这样，如果需要一行文本，它将有90px，但如果需要更多，它将增长流体

并移除隐藏的溢流

已编辑--工作示例：

好的，这是经过正确测试的完整代码（就像我为你做的工具一样，只需设置最小高度，就可以正常工作了：）（很抱歉耽搁了，但我一直非常忙…：/

<!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>


单纯的间谍
$（函数（）{
$（'ul.spy'）.simpleSpy（）.bind（'mouseenter'，function（）{
$（this.trigger（'stop'）；
}).bind（'mouseleave'，函数（）{
$（this.trigger（'start'）；
});
});
（函数（$）{
$.fn.simpleSpy=函数（限制、间隔）{
极限=极限| | 4；
间隔=间隔| | 4000；
函数getSpyItem（$source）{
var$items=$source.find（'>li'）；
如果（$items.length==1）{
//做一个打击，以获得更多
$source.load（'ajax-spy-helper.php'）；
}else if（$items.length==0）{
返回false；
}
//抓取第一个项目，并将其从$source中删除
返回$items.filter（':first'）.remove（）；
}
返回此。每个（函数（）{
//1.设置
//捕获所有列表项的缓存
//将列表缩小以限制li元素
var$list=$（此），
运行=正确，
height=$list.find（'>li:first'）.height（）；
//TODO创建$source元素。。。。
var$source=$（''）.hide（）.appendTo（'body'）；
$list.wrap（“”）.parent（）.css（{height:height*limit}）；
$list.find（'>li'）.filter（':gt（+（limit-1）+'））.appendTo（$source）；
$list.bind（'stop'，函数（）{
运行=错误；
}).bind（'start'，函数（）{
运行=真；
});
//2.效果
函数spy（）{
如果（正在运行）{
var$item=getSpyItem（$source）；
如果（$item！=false）{
//插入不透明度和高度为零的新项目
var$insert=$item.css({
高度:0,，
不透明度：0，
显示：“无”
}).prependTo（$清单）；
//淡出最后一项
$list.find（'>li:last'）.animate（{opacity:0}，1000，function（）{
//增加新的第一项的高度
$insert.animate（{height:height}，1000）。animate（{opacity:1}，1000）；
//同时，降低最后一项的高度
//$（this）.animate（{height:0}，1000，function（）{
//最后淡入第一项（我们可以删除最后一项）
$（this.remove（）；
// });
});
}
}
设置超时（间谍，间隔）；
}
间谍（）；
});
};
})（jQuery）；
简单间谍


2008年11月29日被
未评级
未评级
未评级
未评级



2008年11月29日被
未评级



2008年11月29日被
未评级



2008年11月29日被
未评级
未评级
未评级
未评级



2008年11月29日被
未评级