文本特效-倒三角输出

最新推荐文章于 2024-12-09 09:21:16 发布

一知

最新推荐文章于 2024-12-09 09:21:16 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript 倒三角文本特效

本文链接：https://blog.youkuaiyun.com/laozhangu/article/details/17230637

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种特殊的前端布局方法，利用三角形布局技巧实现独特的视觉效果。通过JavaScript算法实现了文本的特殊排列，使得页面内容能够按照预设的形式显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="sum" id="sum0" style="width: 500px; height: 300px; background: #aaa;
    font-size: 16px; text-align: center;">
    <strong>导语:</strong><span id="hImg1">这个是设计稿上的要做成这样子,好好学习，天这个是设计稿上的要做成这样子,好好学习，

天这个是设计稿上的要做成这样子,好好学习，天这个是设计稿上的要做成这样子,好好学习，天天向上psz</span>……<a href="#"
        target="_blank">[详细]</a>
</div>
<script type="text/javascript">
    var getEle = document.getElementById("hImg1");
    function daoSanJiao(ptext,pbef,paft,prow) {
        var divtext = ptext.replace(/(^\s*)|(\s*$)/g, '');
        var len = b =( divtext.length+pbef+paft) / prow;
        var str = "";
        var a = 0;
        for (var i = 0; i < prow; i++) {
            len += 2 * (1 - i);
            if (i == 0) {
                len -= pbef;
                str += divtext.substr(a, len) + "<br/>";
            }
            else if (i == prow-1) {
                len -= paft;
                str += divtext.substr(a, len);
            }
           else {
                str += divtext.substr(a, len) + "<br/>";
            }
            a += len;
            len = b;
        }
        return str;
    }
    getEle.innerHTML = daoSanJiao(getEle.innerHTML,3,6,5);
</script>