0

我正在寻找在我的网站中创建效果，我的页面顶部有一个信息容器，充当此特定页面的标题。我的“标题”项目由一些文本和一个相当大的图像组成，但文本可能需要截断为一定数量的字符。我希望能够单击一个按钮，然后通过展开文本 div 来展开/滑动以显示未截断的文本，覆盖图像

HTML

<div class="container">
    <div id="mytext" class="text"><h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit. Nunc vestibulum sodales massa ac consectetur. Maecenas eu nisl vel erat pellentesque eleifend ut a est. Nullam ac lorem nisi, eu consequat nisi. In euismod porttitor adipiscing. Aenean feugiat, turpis nec accumsan posuere, diam tellus pharetra arcu, sit amet ultrices magna felis ac elit. Donec sit amet massa nisi, sed semper turpis. Aliquam fringilla vestibulum urna, in tincidunt dui facilisis condimentum. Integer eget enim lectus, id congue ipsum. Sed sit amet ante nec turpis mattis venenatis. In urna quam, cursus vel cursus eu, volutpat eget leo. Praesent in mi diam, vitae tincidunt eros. Etiam feugiat venenatis purus eu cursus. Curabitur euismod, dolor in rhoncus vehicula, leo justo commodo orci, id pulvinar felis purus at lacus. <a href="#" id="expand-div">Expand</a></div>
    <div class="image">Image goes here</div>
</div>

CSS

.container {
    width:500px;
    height:300px;
    border:solid 1px black;
    position:relative;
}

.image {
    background:#00b3f0;
    line-height:300px;
    color:black;
    width:50%;
    text-align:center;
}

.text {
    color:black;
    height:100%;
    position:absolute;
    right:0;
    background:#00DD99;
    max-width:50%;
}

.text a {
    text-decoration:none;
    display:inline-block;
    background:white;
    color:black;
    padding:2px 5px;
}

jQuery

var expand_btn = document.getElementById('expand-div').outerHTML;

var long_title = document.getElementById('mytext').innerHTML;
var short_title = jQuery.trim(long_title).substring(0, 240).split(" ").slice(0, -1).join(" ") ;

document.getElementById('mytext').innerHTML = short_title + ' - ' +expand_btn;

$("#expand-div").click(function(event) {
    event.preventDefault();
    text_div = $(this).closest('div');
    div_width = parseInt(text_div.css('max-width'));
    if(div_width == 50) {
        $(this).closest('div').animate({"max-width": "100%"}, "slow");
        document.getElementById('expand-div').innerHTML = 'Shrink';
    } else {
        $(this).closest('div').animate({"max-width": "50%"}, "slow");
        document.getElementById('expand-div').innerHTML = 'Expand';
    }
});

我已经整理了一个基本的小提琴来展示我所追求的那种效果，但是我在编写 JQuery 方面从来都不是最好的，当我试图在文本之间进行更改时，我可能会为自己犯错误，因为它停止工作了。理想情况下，我想从这个位置动画截断效果，但这不是必需的。

4

1 回答 1

1

使用css text-overflow属性应该会使这更容易。但是，它不适用于某些较旧的浏览器。

于 2013-03-20T21:41:51.267 回答