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 に答える