jQuery响应式仿支付宝查看更多消息特效

来源:https://www.sucaihuo.com/js/5158.html 2020-04-17 09:52浏览(154) 收藏

jQuery响应式仿支付宝查看更多消息特效,点击查看更多文字内容,可自适应浏览器大小。
jQuery响应式仿支付宝查看更多消息特效
分类:文字特效 难易:初级
查看演示 下载资源: 4 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript">
		var psize = parseInt($('.DYFp').css('font-size'))
		var plh = parseInt($('.DYFp').css('line-height'))
		var divW = $('.DYFdiv').width()
		var divH = $('.DYFdiv').height()
		var rowTextNum = parseInt(divW/psize)
		var verticalTextNum = parseInt(divH/plh)
		var divTextNum = parseInt(rowTextNum*verticalTextNum)
		var steTextnum = parseInt(rowTextNum*3)
		var setDivTextNum = divTextNum-6
		var divLen = $('.DYFdiv').length
		for(var i = 0;i<divLen;i++){
			var ptextnum = $('.DYFdiv').eq(i).find('.DYFp').html()
			var ptextnumlen = ptextnum.length
			if(ptextnumlen>steTextnum){
				$('.DYFdiv').eq(i).append("<a class='DYFa' href='javascript:;'>查看更多</a>")
				$('.DYFdiv').eq(i).find('.DYFp').css("display","-webkit-box")
			}
		}
		console.log('div的宽度='+divW)
		console.log('div的高度='+divH)
		console.log('p标签的文字大小='+psize)
		console.log('p标签的行高='+plh)
		console.log('一行可放多少个字='+rowTextNum)
		console.log('一共有几行文字='+verticalTextNum)
		console.log('三行一共可以放多少个文字='+steTextnum)
		$('div').on('click','a',function(){
			$(this).siblings('p').css('display','block')
			$(this).hide()
		})
		
</script>
标签: 更多
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

1 2