如何實現類似Play商店的描述

-1

Play商店（在許多其他網站中）不完全顯示商品的描述，而是顯示其中的部分內容，並隱藏其餘部分。如何實現類似Play商店的描述

您可以點擊「閱讀更多」以便閱讀其餘的描述，其中（按鈕）將展開描述部分。

的事情是：它顯示文本的其餘部分褪色，就像你可以在這裏看到：

https://play.google.com/store/apps/details?id=com.skype.raider&hl=en

請注意文本「撞到你知道的東西。「

enter image description here

來源

2015-06-22 xdeveloper

您好，歡迎堆棧溢出。在這裏，我們希望你研究（例如通過谷歌），嘗試任何教程，你會發現...只有當你至少有一個自己去的時候纔會問我們一個問題。所以，給它一個打擊 - 即使你不能做到這一切，至少有一些你知道如何解決的問題。向我們展示您嘗試的代碼（即使它不工作），我們可以幫助您填寫空白。 –

您好Taryn，感謝您的-1，我真的很難搜索互聯網，甚至試圖從Play商店獲取代碼，甚至嘗試各種搜索，如文本溢出時顯示文本下方的透明圖像......就在幾乎搜索了我在這裏發佈的日誌之後。抱歉再次打擾，畢竟我可能不適合Stackoverflow！ – xdeveloper

@xdeveloper不用擔心！他所說的所有問題都是解決SO問題的標準方法，就是先展示你所嘗試過的東西，這樣我們就可以得到你的想法並在需要時予以糾正。我們都盡力爲您提供幫助！ – acupajoe

如果你進入inspect element模式在您的開發人員工具中，您會注意到它是一個絕對定位的元素，具有漸變背景，可以轉換爲透明。通過爲描述定義設置高度並隱藏溢出，我們可以爲元素添加酷炫的「淡化文本」效果。之後，它只是一個簡單的類切換來隱藏效果並將文本的高度設置爲100％。

示例下面！

$(function() { 
 
    $('.read').click(function() { 
 
    $('.text').toggleClass('expanded'); 
 
    }); 
 
});

.text { 
 
    height: 75px; 
 
    overflow-y: hidden; 
 
    position: relative; 
 
} 
 
.text.expanded { 
 
    height: 100%; 
 
} 
 
.text.expanded .top { 
 
    display: none; 
 
} 
 
.top { 
 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 245, 245, 0)), color-stop(100%, #F5F5F5)); 
 
    background-image: -webkit-linear-gradient(top, rgba(245, 245, 245, 0), #F5F5F5); 
 
    background: linear-gradient(to bottom, rgba(245, 245, 245, 0), #F5F5F5); 
 
    bottom: 0; 
 
    cursor: pointer; 
 
    height: 30px; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="text"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
    <div class="top"></div> 
 
</div> 
 
<a href="javscript:void(0);" class="read">Read More</a>

來源

2015-06-22 02:14:42 acupajoe

如何實現類似Play商店的描述

回答

相關問題