精华内容
参与话题
问答
  • css: 控制容器的高度height,auto overflow:hidden 控制元素是否显示display: none 控制渐变效果 background: linear-gradient(180deg,rgba(255,255,255,0),#fff);/实现渐变效果,遮罩效果/ ......

    URlSearchParams 这个也很重要

    点击后触发js函数, js修改css样式

    css:
    控制容器的高度height,auto
    overflow:hidden
    控制元素是否显示display: none
    控制渐变效果
    background: linear-gradient(180deg,rgba(255,255,255,0),#fff);/实现渐变效果,遮罩效果/
    transition 动画效果
    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • vue查看更多的写法

    千次阅读 2019-07-05 10:58:28
    页面布局: <div class="my_card" v-for="(item,index) in tableData" style="margin-bottom: 10px;"> <div v-for="column in tableColumns.slice(0,3)"> ...div class="column-box">...

    页面布局:

    <div class="my_card" v-for="(item,index) in tableData" style="margin-bottom: 10px;">
    	<div v-for="column in tableColumns.slice(0,3)">
    		<div class="column-box">
    			<label>{{column.title}}</label>
    			<div class="column_box">
    				<template></template>
    			</div>
    		</div>
    	</div>
    	<div v-for="column in tableColumns.slice(3,tableColumns.length)" class="more_show" style="display: none;">
    		<div class="column-box">
    			<label>{{column.title}}</label>
    				<div class="column_box">
    				    <template></template>
    				</div>
    			</div>
    		</div>
    	<div style="text-align: center;">
    		<el-button type="primary" class="button" v-on:click="seeMore(index)" style="font-size: 14px;margin-top: 10px;">查看更多</el-button>
    	</div>
    </div>

    js:

    //查看更多
    seeMore:function(index){
    	var my_card = document.getElementsByClassName("my_card")
    	var more_show = my_card[index].childNodes
    	console.log(my_card)
    	//先清除其他的查看更多样式
    	for(var i=0;i<my_card.length;i++){
    		var more_show_other = my_card[i].childNodes
    		for(var j=0;j<more_show_other.length;j++){
    			if(more_show_other[j].nodeType==1&&more_show_other[j].className=="more_show"){
    				more_show_other[j].style.display = "none"
    			}
    		}
    	}
    	//再打开当前的查看更多
    	for(var i=0;i<more_show.length;i++){
    		if(more_show[i].nodeType==1&&more_show[i].className=="more_show"){
    			 more_show[i].style.display = "block"
    		}
    	}
    },

    样式:

    /*卡片视图添加样式*/
    .my_card{
    	width: 98%;
    	font-size:16px;
    	border: 1px solid #EBEEF5;
    	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    	transition: .3s;
    	background-color: #fff;
    	color: #303133;
    	border-radius: 4px;
    	overflow: hidden;
    	padding: 20px;
    	box-sizing: border-box;
    }
    .my_card label{
    	display: block;
    	width: 40%;
    	height: 45px;
    	line-height: 45px;
    	float: left;
    }
    .my_card>div:first-child{
    	font-weight: 600;
    	border-bottom: 1px solid #eee;
    }
    .my_card>div:last-child{
    	font-weight: 600;
    	border-top: 1px solid #eee;
    }

    最终效果:

    展开全文
  • 小程序内容超出显示查看更多

    千次阅读 2019-04-18 10:10:47
    wxml: <view class='company-synopsis-panel white-bg-radius'> <view class='my-companye-title flex-between'> <view class='bold-text2851'>...view class='text20517'...

    wxml:

    <view class='company-synopsis-panel white-bg-radius'>

    <view class='my-companye-title flex-between'>

    <view class='bold-text2851'>公司简介</view>

    <view class='text20517' bindtap='toggle'>{{readmore.tip}}<image class='green-rrow' src='{{readmore.rrow}}'></image></view>

    </view>

    <view class='text20451 company-synopsis-content {{readmore.status ? "company-synopsis-ovflow" : ""}}'>

    腾讯科技(深圳)有限公司成立于1998年11月,是目前中国最大的互联网综合服务提供商之一,也是中国服务用户最多的互联网企业之一。成立十年多以来,腾讯一直秉承一切以用户价值为依归的经营理念,始终处于稳健、高速发展的状态。2004年6月16日,腾讯公司在香港联交所主板公开上市(股票代号700),也是中国服务用户最多的互联。腾讯科技(深圳)有限公司成立于1998年11月,是目前中国最大的互联网综合服务提供商之一,也是中国服务用户最多的互联网企业之一。成立十年多以来,腾讯一直秉承一切以用户价值为依归的经营理念,始终处于稳健、高速发展的状态。2004年6月16日,腾讯公司在香港联交所主板公开上市(股票代号700),也是中国服务用户最多的互联。

    </view>

    </view>

    wxss:

    .white-bg-radius{

    background:rgba(255,255,255,1);

    box-shadow:0rpx 12rpx 35rpx 0rpx rgba(215,216,218,0.8);

    border-radius:16rpx;

    }

    .flex-between{

    display: flex;

    align-items: center;

    justify-content: space-between;

    }

    .bold-text2851{

    font-size:28rpx;

    font-weight:bold;

    color:rgba(51,51,51,1);

    }

    .text20451{

    font-size:20rpx;

    font-weight:400;

    color:rgba(51,51,51,1);

    }

    .text20517{

    font-size:20rpx;

    font-weight:500;

    color:rgba(17,158,161,1);

    }

    .company-synopsis-panel{

    padding: 0 0 31rpx 0;

    }

    .my-companye-title{

    height: 74rpx;

    line-height: 74rpx;

    padding: 0 48rpx;

    border-bottom: 2rpx solid rgba(238,238,238,1);

    }

    .green-rrow{

    width: 20rpx;

    height: 11rpx;

    padding-left: 12rpx;

    }

    .company-synopsis-content{

    padding: 31rpx 45rpx 0 45rpx;

     

    }

    .company-synopsis-ovflow{

    display: -webkit-box;

    overflow: hidden;

    text-overflow: ellipsis;

    word-wrap: break-word;

    white-space: normal;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 5;

    }

    js:

    Page({

     

    /**

    * 页面的初始数据

    */

    data: {

    readmore: {

    status: true,

    tip: '查看更多',

    rrow:'https://res.tuoluohuodong.com/green_bottom_rrow.png'

    }

    },

    onReady() {

    const query = wx.createSelectorQuery()

    let self = this

    query.select(".content").boundingClientRect(function (res) {

    const lineHeight = 18

    const height = res.height

    const status = "readmore.status"

    self.setData({

    [status]: height / lineHeight > 4

    })

    }).exec()

    },

    toggle() {

    const status = this.data.readmore.status

    this.setData({

    readmore: {

    status: !status,

    tip: status ? '收起' : '查看更多',

    rrow: status ? 'https://res.tuoluohuodong.com/green_top_rrow.png' : 'https://res.tuoluohuodong.com/green_bottom_rrow.png'

    }

    })

    },

    })

    展开全文
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <......
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    
    
    
    <DIV id=soft_instr name="soft_instr">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    1111111111<br />
    22222222222<br />
    3333333333<br />
    444444444444<br />
    5555555555555<br />
    666666666666666666<br />
    
    
    </DIV>
    
    
    <DIV id=comm_1 name="comm_1"></DIV>
    <DIV id=comm_2 style="DISPLAY: none" name="comm_2"></DIV>    
    <DIV id=comm_3 style="DISPLAY: none;" name="comm_3">
        <SPAN>
            <INPUT onclick="this.value==='详细介绍'?this.value='点击收起':this.value='详细介绍';show_brief();" type=button value="详细介绍" name=botton>
        </SPAN>
    </DIV>
    
    
    <SCRIPT type=text/javascript> 
            document.getElementById('comm_1').innerHTML=document.getElementById('soft_instr').innerHTML; 
            document.getElementById('comm_2').innerHTML=document.getElementById('soft_instr').innerHTML; 
           
           function show_brief(){
                var obj1=document.getElementById('comm_1');
                var obj2=document.getElementById('comm_2');
                if(obj1.style.display==""){
                    obj1.style.display="none";       
                    obj2.style.display="";   
                     obj2.innerHTML=document.getElementById('soft_instr').innerHTML;
                }else{
                    obj2.style.display="none";
                    obj1.style.display="";
                     obj1.innerHTML=document.getElementById('soft_instr').innerHTML; 
                }
                
           }
                
                 var _h=document.getElementById('comm_1').offsetHeight;
                  document.getElementById('soft_instr').style.display="none";
     
                if(_h > 200){
                    document.getElementById('comm_1').style.height="107px";
                    document.getElementById('comm_1').style.overflow="hidden";
                    document.getElementById('comm_3').style.display="block";
                }
               
        </SCRIPT>
    
    
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/visi_zhangyang/archive/2012/06/14/2549708.html

    展开全文
  • js文字超出部分隐藏 显示查看更多

    万次阅读 2018-02-08 11:59:55
    一、js文字超出部分隐藏 显示查看: CSS: *{ padding: 0; margin: 0; } .text-hide{ width: 250px; font-size: 16px; color: #666; border: 1px solid #ccc; line-height: 24px; } .che...
  • 查看更多和收起的js

    千次阅读 2017-09-29 08:46:18
    var serv1 = document.getElementById("job_intro_info"); var aBtn1 = document.getElementById("job_intro_btn");   var serv = document.getElementById("company_service"); var aBtn = document.getElem
  • 大家做一些文本简介展示需求时可能会遇到文本过长的场景,这时视觉同学可能会要求设置最大行数并在末尾展示"查看更多"(后面简称 MoreText)。废话不多说,先看下要求实现的效果(图为实现后的Demo效果): 通过看效果...
  • 前端实现“查看更多”效果

    千次阅读 2019-10-02 23:43:46
    讲干货,不啰嗦,有时候文案文字较多,用户进入页面时先隐藏一部分,有“查看更多”按钮,用户点击展示全部文案,以下是具体实现: 最终效果: 具体实现: <!DOCTYPE html> <html lang="en">...
  • 实现方式是不改变RecyclerView本身,定义了一个父控件装载,查看更多和架子更多的view也同样作为该父控件的子控件。有简单的阻尼回弹效果。 实现代码: public class PulToLeftViewGroupl extends LinearLayout ...
  • 点击查看更多

    千次阅读 2018-06-07 15:55:25
    &lt;div class="content showMoreNChildren" pagesize="3"&gt;//调用的方法和页数 &lt;div class="content1"&gt;  &lt;p class="content1-title"...
  • Android 查看更多 TextView实现

    千次阅读 2016-03-04 00:42:38
    在公司开发过程中,需要用到固定行数的展开查看更多的控件,在网上找了好久,都没有找到,于是花了半天时间实现了一个,在此做下记录,主要有几个关键的地方: private Layout makeTextLayout(String text) { ...
  • 微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData, 下面是一个简单的栗子: index.wxml代码如下 ...加载更多按钮绑定setLoading index.js文件代码如下
  • android RecyclerView实现查看更多及收起

    千次阅读 2017-05-17 16:58:44
    三个list: realList 真实list hideList 隐藏时的list ...判断适配器条目大于4(可任意)时,将适配器hideList设置为真实list的前三个条目+查看更多;将适配器openList设置为真实list+收起 ...
  • 本文介绍了在微信小程序中,如何实现常见的一大段文字的查看更多的效果。
  • iOS简单实现查看更多/收起的效果

    千次阅读 2016-09-24 09:42:09
    此博客模板出现问题, 代码已移植到:另一篇博客   首先看效果: ...II 查看更多/收起按钮放置在UITableView的区尾上.   Github地址 此博客模板出现问题, 代码已移植到:另一篇博客   上代码:  1....
  • android仿淘宝下拉查看更多

    千次阅读 2015-01-12 16:20:42
    1、http://blog.csdn.net/zhongkejingwang/article/details/38656929
  • Android尾部带“查看更多”的TextView

    千次阅读 2016-08-11 13:36:55
    声明一下,首先是从这篇文章看到的,拿过来后呢,做了一些改进。 首先是增添了几个属性;其次,也是最重要的,改进了调用setText()重新设置文本时,其下方的View会发生抖动的问题,也就是onMeasure()中的那段代码...
  •  当列表数据太多时,就会进行分段查询,这就有了查看更多  小编在刚刚开始做的时候也是费了很大的劲,想了三种方案,这就不细说了,来说下最简单的方案   PHP代码:  .....其实PHP是不需要处理什么东西的,...
  • css样式[三行文字省略号查看更多]

    千次阅读 2018-06-05 11:06:18
    /* 三行文字 省略号 */ .lookmoretop{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical...
  • 上面是文章的内容,下面有个评论和点赞。要保证无论文章多长,下面的评论和点赞位置一直要在下面,...还有一种就是通过一个查看更多的按钮,点击了才会展开显示所有的内容,不然显示一个页面的。    标题  时间

空空如也

1 2 3 4 5 ... 20
收藏数 1,636,137
精华内容 654,454
关键字:

查看更多