Сворачивание и разворачивание длинного текста
1. В ваш css файл добавить
2. В ваш js файл в конец добавить
3. Как пользоваться.
Пусть у вас есть
Тогда
где 200 - высота, при которой свернется.
Пусть у нас два блока
Тогда
.slice {overflow:hidden; position:relative; transition:height .2s;}
.slice-masked:before {content:'';position:absolute;z-index:1;bottom:0px;left:0;right:0;height:120px;pointer-events:none;
background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 100%);
background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);}
.slice-btn {margin:20px 0; font-weight:700;}
.slice-btn span {display:inline-block; cursor:pointer; text-decoration:underline; color:#f0542e;}
2. В ваш js файл в конец добавить
$(document).ready(function(){
$('.movie-desc').wTextSlicer({
height: '200',
textExpand: 'Развернуть сюжет',
textHide: 'Свернуть сюжет'
});
});
/*! wTextSlicer v 1.01 */
jQuery.fn.wTextSlicer = function(options){
var options = jQuery.extend({
height: '200',
textExpand: 'expand text',
textHide: 'hide text'
},options);
return this.each(function() {
var a = $(this),
h = a.outerHeight();
if ( h > options.height ) {
a.addClass('slice slice-masked').attr('data-height',h).height(options.height).after('<div class="slice-btn"><span>'+options.textExpand+'</span></div>');
};
var bt = $(this).next('.slice-btn').children('span');
bt.click(function() {
var ah = parseInt(a.css("height"), 10);
ah == h ? a.css({'height':options.height}) : a.css({'height':h});
bt.text(bt.text() == options.textExpand ? options.textHide : options.textExpand);
a.toggleClass('slice-masked');
});
});
};
3. Как пользоваться.
Пусть у вас есть
<div class="movie-desc">МЫ ХОТИМ ЭТО СВЕРНУТЬ</div>
.Тогда
$(document).ready(function(){
$('.movie-desc').wTextSlicer({
height: '200',
textExpand: 'Развернуть сюжет',
textHide: 'Свернуть сюжет'
});
});
где 200 - высота, при которой свернется.
Пусть у нас два блока
<div class="movie-desc">МЫ ХОТИМ ЭТО СВЕРНУТЬ</div> и <div class="movie-lines">МЫ ХОТИМ ЭТО СВЕРНУТЬ ТОЖЕ</div>
.Тогда
$(document).ready(function(){
$('.movie-desc').wTextSlicer({
height: '200',
textExpand: 'Развернуть сюжет',
textHide: 'Свернуть сюжет'
});
$('.movie-lines').wTextSlicer({
height: '100',
textExpand: 'Показать больше',
textHide: 'Спрятать'
});
});
Отзывов (4)