JS点击阅读更多 简约

Js 2019-10-14 12:32:03 评论

 

 

引用

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

JS代码

<script>
function readAll() {    
	var cheight = $('.article_content').height();
	var firsth = Math.ceil($(window).height() * 1.2);
	var sheng = Math.ceil((cheight - $(window).height() * 1.2)/cheight *100);	
	var loadbut = $('<div class="read-box"><div class="read_mask"></div><div class="read_mod" id="read_mod"><a href="javascript:" class="read-button">展开剩余<em>'+sheng+'</em> %<img src="//i.zgjm.org/img/icon_read.png" data-bd-imgshare-binded="1"></a></div></div>');	
	$('.article_content').after(loadbut);	

	if(cheight <= $(window).height() * 1.2){
	    $('.read-box').css('display','none');
	    return;
	}else{	    
	    $('.article_content').height(firsth);
	}	

	$('.read-box').click(function(){
			$('.article_content').css('height','auto'); 
	    $(this).css('display','none');	   
	});
}
</script>

替换里面的文章主题class .article_content

模版结尾加上

<script type="text/javascript">readAll();</script>

评论

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!