八零站长网

网站首页 > 网页特效 > jquery特效 >

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

jQuery响应式仿支付宝查看更多消息特效,点击查看更多文字内容,可自适应浏览器大小。
jQuery响应式仿支付宝查看更多消息特效
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>