精华内容
下载资源
问答
  • CSS3文字手风琴展开效果是一款纯CSS3实现的手风琴展开效果,无需任何js代码,鼠标滑过自动展开,可以实现横向和纵向的手风琴效果。
  • 文字的折叠与展开效果
  • 主要介绍了jquery实现点击查看更多内容控制段落文字展开折叠效果,涉及jquery中fadeIn与fadeOut实现折叠与展开页面元素的功能,非常具有实用价值,需要的朋友可以参考下
  • 一款支持鼠标自由拖拽图片位置的jQuery图片随意拖动排列代码,点击图片展开文字介绍效果。 引入js文件 [removed][removed] [removed][removed]
  • 内容索引:脚本资源,jQuery,jQuery菜单,折叠面板 jQuery 点击标题展开文字效果代码,实际上像一个菜单一样,只不过这里把菜单看成了两级,而第二级又只有一项菜单,这样理解的话,编写出类似的效果就很容易了。...
  • 一款支持鼠标自由拖拽图片位置的jQuery图片随意拖动排列代码,点击图片展开文字介绍效果
  • 国站引进的CSS3特效。...当点击顶部的按钮的时候,列表会不断重复展开折叠的效果,像折纸一样,效果逼真。 使用方法简单,依次调用jquery插件以及本文中的两个jquery插件,将li中的内容换成你想要的即可
  • 最近在微信小程序界面开发中,经常遇到文字描述太多,UI设计师要求将文字收起,只留两行文字,后面以省略号显示,点击“查看全部”可以展开更多,效果如下图: 先贴上wxml中的代码: <view class="...

    最近在微信小程序界面开发中,经常遇到文字描述太多,UI设计师要求将文字收起,只留两行文字,后面以省略号显示,点击“查看全部”可以展开更多,效果如下图:

    先贴上wxml中的代码:

    <view class="cmty-desc {{fold ? 'fold' : 'unfold'}}">
        星河时代所处区域为大运新城与龙岗中心城交汇之处。政府对大运新城的定位为集体育运动、居住、商业文化、旅游休闲为一体的城市复合功能区,其高端的规划起点,巨大的政府投入,便捷的交通条件,完善的区域配套,将使片区的城市发展提前十年。星河时代所处区域生态资源丰富,除却龙城公园、龙潭公园、原生态自然公园——马峦山郊野公园、清林径森林公园、龙岗植物园外,正在建设的大运自然公园也围绕于项目区域附近,生态区域优越。
      </view>
      <view class='view-all-layout'>
        <text class='view-all' bindtap='unfold'>{{foldText}}</text>
      </view>

    关键的代码在css中:

    .cmty-desc {
      margin: 20rpx 20rpx 0rpx 30rpx;
      font-size: 28rpx;
      color: #888;
      //关键属性
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;//结尾以省略号显示
      overflow: hidden;
    }
    
    .fold {
      -webkit-line-clamp: 2;//设置折叠之后显示的行数
    }
    
    .unfold {
      -webkit-line-clamp: 0;
    }
    
    .view-all-layout {
      width: 100%;
      position: relative;
    }
    
    .view-all {
      position: absolute;
      right: 30rpx;
      font-size: 26rpx;
      color: #3e79c1;
      padding: 5rpx;
    }

    最后是js文件添加事件点击的代码:

    Page({
      data: {
        fold: true,
        foldText: '查看全部',
      },
    
      unfold: function (e) {
        var page = this;
        let value = !this.data.fold;
        var text = '';
        if (value) {
          text = '查看全部';
        } else {
          text = '收起全部';
        }
        this.setData({
          fold: value,
          foldText: text
        })
      }
    
    })

     

     

     

     

     

     

     

     

    展开全文
  • vue控制多行文字展开收起

    万次阅读 2019-05-30 16:43:31
    这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏)。 效果: 这里设置了控制三行,如果超过三行会展示,“显示更多” 超出文字显示省略号。 点击“显示更多”会展开所有文案,按钮变成“收起”...

    这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏)。

    效果:

    1. 这里设置了控制三行,如果超过三行会展示,“显示更多” 超出文字显示省略号。
    2. 点击“显示更多”会展开所有文案,按钮变成“收起”

    在这里插入图片描述

    (未超出三行的时候)
    在这里插入图片描述
    (展开)
    在这里插入图片描述
    (收起)

    代码实现:

    <template>
      <div>
        <p class="m-content overflow-line" id="J_description">{{introduce}}</p>
        <button type="button" class="btn-more" v-if="isShowMore" id="J_btnmore" @click="showmoreDesc($event)">查看更多</button>
      </div>
    </template>
    <script>
      export default {
        name: 'Spread',
        data() {
          return {
            isShowMore: false,
            isDescStatus: true,
            introduce: ""
          };
        },
        props: {
          mes2: {
            type: String,
            default: ""
          }
        },
        methods: {
          showmoreDesc(e) {
            let el = e.currentTarget;
            el.previousElementSibling.classList[!this.isDescStatus ? 'add' : 'remove']('overflow-line');
            el.classList[this.isDescStatus ? 'add' : 'remove']('more-collapse');
            el.innerHTML = !this.isDescStatus ? '查看更多' : '收起';
            this.isDescStatus = !this.isDescStatus;
            that.isShowMore = true;
          }
        },
        watch: {
          mes2(val) {
            this.introduce = val;
            if (this.introduce.length > 75) {
              this.isShowMore = true;
            }
          }
        }
      };
    </script>
    
    <style lang="less" scoped>
      .m-content {
        &.overflow-line {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
    
      .btn-more {
        color: #fff;
        float: right;
        color: #5383E7;
        position: relative;
        margin-top: rc(5);
        padding-right: rc(33);
    
        &.more-collapse {
    
          &::after,
          &::before {
            top: 2px;
            transform: rotate(180deg);
          }
    
          &::before {
            top: 4px;
          }
        }
    
        &::after,
        &::before {
          width: 0;
          height: 0;
          content: '';
          position: absolute;
          right: 0;
          top: 7px;
          border: rc(12) solid transparent;
        }
    
        &::after {
          border-top-color: #5383E7;
          z-index: 1;
        }
    
        &::before {
          border-top-color: #1c2239;
          z-index: 2;
          top: 5px;
        }
    
      }
    </style>
    

    使用组件

    <Spread :mes2="需要传递的文字数据"></Spread>
    
    展开全文
  • 内容索引:脚本资源,jQuery,展开菜单 一段文字目录、内容展开与折叠的效果,用jQuery制作,可看作是一个非常酷的菜单,怎么说了,就像手风琴菜单一样,点右上角的小按钮可全部展开内容,再点击展开内容中的某一条...
  • 文字省略效果

    2021-06-01 20:07:43
    文字超长可自定义限定字数,显示省略号 展开 收起
  • 这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏)。 效果: 这里设置了控制三行,如果超过三行会展示,“显示更多” 超出文字显示省略号。点击“显示更多”会展开所有文案,按钮变成“收起” ...
  • 展开与折叠效果

    2015-06-25 10:40:20
    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容。
  • 主要介绍了JavaScript实现鼠标点击后层展开效果的方法,可实现点击文字缓慢展开层的效果,具有一定参考借鉴价值,需要的朋友可以参考下
  • Flutter仿朋友圈多行文字展开收起

    千次阅读 2019-10-11 17:33:49
    结尾,并且在文本下方有一个“全文”展开按钮;点击“全文”按钮后文本全部显示完整,按钮变成“收起”;点击“收起”按后又恢复成只显示部分行数内容。 测试页面效果图如下: 实现原理: 使用...

    Flutter实现类似朋友圈文字显示控件功能:1.文字较少时,直接显示原文本。2.文字超过指定的最大行数时,默认只显示这几行文本,后面...结尾,并且在文本下方有一个“全文”展开按钮;点击“全文”按钮后文本全部显示完整,按钮变成“收起”;点击“收起”按后又恢复成只显示部分行数内容。

     

    测试页面效果图如下:

      

     

    实现原理:

    使用LayoutBuilder控件,实现控件延迟加载。先用TextPainter判断文本内容是否超过指定的行数(例如3行),如果未超过,直接以普通的Text控件显示;如果超过,则显示一个Column控件,其内容分别为Text文本控件和展开/收起按钮控件,并根据展开状态决定Text控件的maxLines属性,以及按钮的文本。

     

    源码:

    1.测试页面源码:

    import 'expandable_text.dart';
    import 'package:flutter/material.dart';
    
    class ExpandableTextPage extends StatefulWidget {
      static void show(BuildContext context) {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return ExpandableTextPage();
        }));
      }
    
      @override
      State<StatefulWidget> createState() {
        return _ExpandableTextPageState();
      }
    }
    
    class _ExpandableTextPageState extends State<ExpandableTextPage> {
      @override
      Widget build(BuildContext context) {
        String shortText = '不超过最大行数三行的多行文本不超过最大行数三行的多行文本';
        String longText = '超过最大行数三行的多行文本超过最大行数三行的多行文本超过最大行数三行的多行文本'
            '超过最大行数三行的多行文本超过最大行数三行的多行文本超过最大行数三行的多行文本超过最大行数三行的多行文本';
    
        return Scaffold(
          appBar: AppBar(
            title: Text('仿朋友圈多行文字展开收起'),
          ),
          body: Container(
            padding: EdgeInsets.all(12),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('短文本测试:'),
                Container(
                  color: Colors.yellow,
                  child: ExpandableText(text: shortText, maxLines: 3, style: TextStyle(fontSize: 15, color: Colors.black),),
                ),
                Padding(padding: EdgeInsets.only(top: 20),),
                Text('长文本测试:'),
                Container(
                  color: Colors.yellow,
                  child: ExpandableText(text: longText, maxLines: 3, style: TextStyle(fontSize: 15, color: Colors.black),),
                ),
              ],
            ),
          ),
        );
      }
    }

    2.封装的功能控件源码:

    import 'package:flutter/material.dart';
    
    class ExpandableText extends StatefulWidget {
      final String text;
      final int maxLines;
      final TextStyle style;
      final bool expand;
    
      const ExpandableText({Key key, this.text, this.maxLines, this.style, this.expand}) : super(key: key);
    
      @override
      State<StatefulWidget> createState() {
        return _ExpandableTextState(text, maxLines, style, expand);
      }
    
    }
    
    class _ExpandableTextState extends State<ExpandableText> {
      final String text;
      final int maxLines;
      final TextStyle style;
      bool expand;
    
      _ExpandableTextState(this.text, this.maxLines, this.style, this.expand) {
        if (expand == null) {
          expand = false;
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return LayoutBuilder(builder: (context, size) {
          final span = TextSpan(text: text ?? '', style: style);
          final tp = TextPainter(
              text: span, maxLines: maxLines, textDirection: TextDirection.ltr);
          tp.layout(maxWidth: size.maxWidth);
    
          if (tp.didExceedMaxLines) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                expand ?
                Text(text ?? '', style: style) :
                Text(text ?? '', maxLines: maxLines,
                    overflow: TextOverflow.ellipsis,
                    style: style),
                
                GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onTap: () {
                    setState(() {
                      expand = !expand;
                    });
                  },
                  child: Container(
                    padding: EdgeInsets.only(top: 2),
                    child: Text(expand ? '收起' : '全文', style: TextStyle(
                        fontSize: style != null ? style.fontSize : null,
                        color: Colors.blue)),
                  ),
                ),
              ],
            );
          } else {
            return Text(text ?? '', style: style);
          }
        });
      }
    }

     

    展开全文
  • 主要为大家详细介绍了Android TextView多文本折叠展开效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • html页面内容的收缩和展开效果

    万次阅读 2017-10-05 09:46:49
    html页面内容的收缩和展开效果 常见的网页中,会见到收缩和展开的效果。比如经常浏览网页里的新闻内容就会经常看到这种效果,新闻的内容只显示少数的一部分,然后后面会跟一个展开的链接,点击这个链接才会显示全部...

    html页面内容的收缩和展开效果

    常见的网页中,会见到收缩和展开的效果。比如经常浏览网页里的新闻内容就会经常看到这种效果,新闻的内容只显示少数的一部分,然后后面会跟一个展开的链接,点击这个链接才会显示全部的新闻内容。
     
    1、收缩情况下显示内容效果
    2、点开之后显示的内容效果
    3、实现的代码如下:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            h3 {
                text-align: center;
            }
            
            #content {
                text-indent: 2em;
            }
        </style>
    </head>
    
    <body>
        <h3>从零开发一个淘宝客公众号【嗨皮搜券】</h3>
        <span id="content">
            春节在家期间研究了一下淘宝客开放平台,并写了一个公众号【嗨皮搜券】,
            功能是可以查询淘宝和天猫内部优惠券,并生成淘口令,别人用我的淘口令
            下单就可以赚取佣金啦。其实50%的淘宝商家会设置一些内部优惠券,90%的商
            家会设置一些返利给推广人员帮忙推销商品,阿里妈妈美其名曰-粉丝福利购。
            利用这个套路做的比较成功的有返利网、花生日记等。看一下效果,发送宝贝
            标题即可搜索内部推广优惠券信息。 点击查看具体的搜券教程:
             https://mp.weixin.qq.com/s/yheG6E04GHE0Hjopt4KzOg。关注【嗨皮搜券】回复<客服>添加我微信,一起学习成长吧!
            用到哪些技术栈和服务?
    1、Node.js(基于Koa搭建后台程序)
    2、花生壳(内网穿透,本地开发调试)
    3、nginx(由于花生壳的域名被微信屏蔽,使用nginx反代理,配合花生壳本地调试使用)
    4、阿里云服务器(上线时使用,如果用自己的电脑的话可以不用买服务器)
    5、TOP(淘宝开放平台API)
    6、微信公众平台(开发文档)
    7、Logo和图片在线设计(凡科快图)
       </span>
        <a href="javascript:;" id="btn">
            <<<收缩</a>
                <script type="text/javascript">
                    //获取button按钮
                    var btn = document.getElementById('btn');
                    //获取p
                    var content = document.getElementById('content');
                    //获取p中的内容
                    var str = content.innerHTML;
                    //定义一个变量,表示当前的状态(收缩、展开)
                    var onOff = true; // true表示展开
                    btn.onclick = function() {
                        if (onOff) {
                            content.innerHTML = str.substr(0, 50) + "......";
                            btn.innerHTML = '>>>展开'
                        } else {
                            //说明当前状态是收缩的,需要展开
                            content.innerHTML = str
                            btn.innerHTML = '<<<收缩';
                        }
                        onOff = !onOff; //每点击一次,改变一次展开、收缩状态
                        return false; //阻止a标签的默认事件
                    }
                </script>
    </body>
    
    </html>

     
     
    展开全文
  • vue实现文字展开收起

    千次阅读 2020-06-08 10:51:04
    最后通过背景色的控制让两者看上去是一段文字。 html <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'"> <div class="intro-content" :title="introduce" ref="desc"> <span ...
  • - 单行文本水平触摸滑动效果 通过EditText实现TextView单行长文本水平滑动效果 - 多行文本折叠展开 自定义布局View实现多行文本折叠和展开 详见: http://blog.csdn.net/jdsjlzx/article/details/45821909
  • 上一篇已经介绍文字默认收起,这篇介绍javascript实现一段文字展开、收起(默认展开)在线演示html:<div id="div1"> 2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了...
  • 功能强大的AJAX控制图片、文字效果,图片滚动、放大、缩小,文字展开,收回等等!
  • java 字体逐渐展开效果 java 字体逐渐展开效果 java 字体逐渐展开效果
  • 因为我js并不是很好,所以并不确定这么修改是不是正确的,因为我这只有树用到了这...因需要将双击文字打开菜单,转变为单击文字打开菜单,我将jstree.js中所有"dblclick"替换为"click".... 双击事件变为单击了.......
  • 主要为大家详细介绍了Android TextView实现多文本折叠、展开效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文主要介绍了js实现选项卡内容切换以及文字折叠和展开效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
  • js文字收缩展开

    千次阅读 2017-05-08 23:30:03
    如何实现c呢?例如:一段内容过长了,我限制他...下面奇芳阁就分享一下通过JS截取字符串实现展开收起(折叠)的功能! 获取div中的文本内容,然后动态创建一个div和和a对象,如果文章的内容超过指定的字数,那么就会截

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,622
精华内容 18,248
关键字:

文字展开效果