jQuery 文本段落展开和折叠效果
jQuery 文本段落展开和折叠效果
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本段落展开和折叠效果</title>
<style>
html,body,div,h2,p{margin: 0;padding: 0;}
html{font: 1em Arial, Helvetica, sans-serif;color: #444;}
a{color: #0087f1;}
p{margin-bottom: 5px;}
#container{margin: 0 auto;width: 600px;}
#container h2{font-size: 20px;color: #0087f1;}
#wwww{position: relative;padding: 10px;overflow: hidden;}
#wwww:after{
content: "";
display: block;
position: absolute;
width: 100%;
background-image: linear-gradient(hsla(0,0%,100%,0),#fff);
opacity: 0;
bottom: 0;
z-index: 1;
transition: opacity .4s ease-out;
}
#wwww.current:after{
height: 100px;
opacity: 1;
}
#read-more{padding: 5px;background: #fff;color: #333;}
#read-more div: hover{color: #000;}
.sdf{display: flex; justify-content: center; align-items: center;cursor: pointer;} </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var slideHeight = 200; //控制默认显示部分的高度
var defHeight = $('#wwww').height();
if(defHeight >= slideHeight){
$('#wwww').css('height' , slideHeight + 'px');
$('#read-more div').click(function(){
var curHeight = $('#wwww').height();
if(curHeight == slideHeight){
$('#wwww').animate({height: defHeight}, "normal").removeClass("current");
$(this).children("span").text('收起');
$(this).children("img").css("transform","rotate(180deg)")
}else{
$('#wwww').animate({height: slideHeight}, "normal").addClass("current");
$(this).children("span").text('展开');
$(this).children("img").css("transform","rotate(0)");
}
return false;
});
}
});
</script>
</head>
<body>
<div id="container">
<h1>jQuery段落文字展开收起</h1>
<div id="wwww" class="current">
<div>
<p>特色"摩托杂技团"缺席 通过电视台转播的现场视频可以看到,仪式上各种新式武器纷纷亮相,印度士兵分为多个方队接连入场。 不同于以往的阅兵仪式,印度特色——"摩托杂技队"并没有出现,原因是摩托杂技需要相互配合,无法保持社交距离。虽然印方称是为了防止疫情蔓延,但整场阅兵式结束,除了一组"黑脸蒙面男"之外,其他的方阵不仅没有保持社交距离,脸上也是没有任何口罩等遮挡物。参与阅兵的规模及人数也似乎并没有受到新冠疫情的影响。</p>
<p>特色"摩托杂技团"缺席 通过电视台转播的现场视频可以看到,仪式上各种新式武器纷纷亮相,印度士兵分为多个方队接连入场。 不同于以往的阅兵仪式,印度特色——"摩托杂技队"并没有出现,原因是摩托杂技需要相互配合,无法保持社交距离。虽然印方称是为了防止疫情蔓延,但整场阅兵式结束,除了一组"黑脸蒙面男"之外,其他的方阵不仅没有保持社交距离,脸上也是没有任何口罩等遮挡物。参与阅兵的规模及人数也似乎并没有受到新冠疫情的影响。</p>
<p>特色"摩托杂技团"缺席 通过电视台转播的现场视频可以看到,仪式上各种新式武器纷纷亮相,印度士兵分为多个方队接连入场。 不同于以往的阅兵仪式,印度特色——"摩托杂技队"并没有出现,原因是摩托杂技需要相互配合,无法保持社交距离。虽然印方称是为了防止疫情蔓延,但整场阅兵式结束,除了一组"黑脸蒙面男"之外,其他的方阵不仅没有保持社交距离,脸上也是没有任何口罩等遮挡物。参与阅兵的规模及人数也似乎并没有受到新冠疫情的影响。</p>
</div>
</div>
<div id="read-more">
<div class="sdf">
<span>展开</span>
<img src="img/bottom.png"/>
</div>
</div>
</div>
</body>
</html>
效果预览:
jQuery 文本段落展开和折叠效果的更多相关文章
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- js_css_dl.dt实现列表展开、折叠效果
第一种方式:不提倡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- JQuery EasyUI treegrid展开与折叠,以及数据加载两次的问题
问题:做项目的时候遇到代码生成的页面,只默认展开了一级节点,每次操作之后刷新还要手动一级一级展开,太麻烦了 官方API:http://www.jeasyui.net/plugins/186.html ...
- 关于类似QQ的展开和折叠效果的实现
介绍: 1.两级折叠与展开: 实现原理如下: 1>通过表视图的组的头视图和单元格实现; 2>通过改变cell的高度实现; 3>通过cell实现; 实现 UITableView 的ce ...
- Vue 实现展开折叠效果
Vue 实现展开折叠效果 效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中,大佬给除了解决方法,再次进 ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- jquery ztree 刷新后记录折叠、展开状态
ztree :http://www.ztree.me/v3/main.php 项目中用到了这个插件,刚好也有需求 在页面刷新后,保存开始的展开.折叠状态, 其实 dtree: http://www.d ...
- 展开折叠效果 height未知 transition无效
展开折叠效果,没有设置height时 transition 不起作用 可以设置max-height .default { max-height: 500px; transition: all 1000 ...
- jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】
今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...
随机推荐
- Autofac官方文档翻译--一、注册组件--2传递注册参数
官方文档:http://docs.autofac.org/en/latest/register/parameters.html 二.Autofac 传递注册参数 当你注册组件时能够提供一组参数,可以在 ...
- 毕业三年,如何达到月薪30K?我想跟你聊聊!!
写在前面 很多读者私信问我,自己工作三多年了,随着工作年限的不断增长,感觉自己的技术水平与自己的工作年限严重不符.想跳槽出去换个新环境吧,又感觉自己的能力达不到心仪公司的标准,即使投了简历也没人来通知 ...
- Java 8 新特性 - Lambda表达式
Lambda表达式 vs 匿名类既然lambda表达式即将正式取代Java代码中的匿名内部类,那么有必要对二者做一个比较分析.一个关键的不同点就是关键字 this.匿名类的 this 关键字指向匿名类 ...
- java中io流实现文件上传下载
新建io.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- web项目报错 无法解析,丢失包 是缺少本地运行jre
1.通过build path 添加add Library 2.添加jre
- 整数划分(硬币问题)(dp)
题目描述 考试时思路 本菜狗考试的时候,第一扁打了纯dfs,15分拿了9分 后面看了时限400ms,多组数据,以为会卡常数,然后就想着先dp打表然后再直接O(1)查询 后面发现自己想多了,数据有点水- ...
- 俯瞰Dubbo全局,阅读源码前必须掌握这些!!
写在前面 在上一篇<冰河开始对Dubbo下手了!>一文中,我们重点介绍了为何要学习Dubbo,而且还是要深入理解Dubbo的原理和核心源码.既然是要写深度解析Dubbo源码的系列专题,我们 ...
- Java 使用线程池执行若干任务
在执行一系列带有IO操作(例如下载文件),且互不相关的异步任务时,采用多线程可以很极大的提高运行效率.线程池包含了一系列的线程,并且可以管理这些线程.例如:创建线程,销毁线程等.本文将介绍如何使用Ja ...
- cookie和session会话技术
因为http协议是无状态的,也就是说每个客户端访问服务器端资源时,服务器并不知道该客户端是谁,所以需要会话技术识别客户端状态.会话技术是帮助服务器记住客户端状态的. 一次会话的开始是通过浏览器访问某个 ...
- Linux面试必备
1.Linux的体系结构