javascript - 如何向上滚动文本并覆盖 javascript/jquery 中的现有文本？

Question

当您进入苹果的个人简介页面时 --> http://www.apple.com/pr/bios/jonathan-ive.html您可以在那里看到链接继续阅读。单击它后，文本会向上滚动，并显示更多文本。

如何在js/jquery中实现这种效果？

我目前有一个 html 文本:

<div class="description">
    <h5>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget auctor ipsum. Sed ultrices odio est, a vulputate nulla dictum vel. Aliquam erat volutpat. Pellentesque at tellus lectus. Aenean ornare consectetur orci. Aliquam non dignissim ante, a vestibulum augue. Ut quis mollis risus. Phasellus lacus felis, sodales eu lorem et, mattis vestibulum lorem.
    </h5>
    <a href="#">read more...</a>
</div>

当用户单击链接时，如何将其更改为不同的文本，就像在苹果网站上一样？

Answer 1

当您“检查”Apple 页面上的“继续阅读”元素时，会链接以下 JavaScript 代码。

var truncate = {
duration: 2.5,
heightOffset: 18,

initialize: function(section) {
    this.section      = $(section);
    this.section.style.top = '0px';

    this.wrapper = new Element('div', { className:'profile-copy-wrapper', style:'overflow-y:hidden; overflow-x:visible;' });
    this.parent = $(this.section.parentNode);
    this.parent.removeChild(this.section);
    this.wrapper.appendChild(this.section);
    this.parent.appendChild(this.wrapper);

    if (this.shouldTruncate()) {
        this.wrapper.style.height = this.wrapper.getHeight()-this.heightOffset+'px';

        this.more = new Element('a', { className:'truncate', href:'#more' }).insert('Continue reading');
        this.more.observe('click', this.toggle.bind(this));
        this.parent.appendChild(this.more);

        this.less = new Element('a', { className:'truncate less', href:'#back', style:'display:none; opacity:0;' }).insert('Back');
        this.less.observe('click', this.toggle.bind(this));
        this.parent.appendChild(this.less);
    }
},

shouldTruncate: function() {
    return (this.wrapper.getHeight() < this.section.getHeight());
},

toggle: function(evt) {
    evt.stop();

    if (!this.expanded) {
        this.expand();
    } else {
        this.contract();
    }
},

expand: function() {
    this.expanded = true;

    this.more.hide();
    this.more.setOpacity(0);

    if (AC.Detector.isCSSAvailable('transition')) {
        this.less.show();
        window.setTimeout(function() {
            this.less.setOpacity(1);
        }.bind(this), 1000);
        this.section.style.top = '-'+parseInt (this.wrapper.getHeight()- (2*this.heightOffset)) +'px';
        this.wrapper.style.top = this.heightOffset +'px';
    } else {
        this.less.appear({ duration:3 });
        this.section.morph('top:-'+parseInt (this.wrapper.getHeight()- (2*this.heightOffset)) +'px', { duration:this.duration });
        this.wrapper.morph('top:'+ this.heightOffset +'px', { duration:this.duration });
    }
},

contract: function() {
    this.expanded = false;

    this.less.hide();
    this.less.setOpacity(0);

    if (AC.Detector.isCSSAvailable('transition')) {
        this.more.show();
        window.setTimeout(function() {
            this.more.setOpacity(1);
        }.bind(this), 1000);
        this.section.style.top = '0px';
        this.wrapper.style.top = '0px';
    } else {
        this.more.appear({ duration:3 });
        this.section.morph('top:0px', { duration:this.duration });
        this.wrapper.morph('top:0px', { duration:this.duration });
    }
}

}

truncate.initialize('profile-copy');