jQuery多余文字折叠效果

CSS代码

 1 .morecon{
 2     cursor:pointer;
 3     font-size:14px; float: left;
 4     margin: 5px 10px 0 0;
 5     color: #0096FF;
 6 }
 7 .checkmore .text{
 8     width: 100px;
 9     overflow: hidden;
10 }

HTML代码

1 <div class="checkmore">
2     <div class="text">
3         <p>我是爱德华，来自美国旧金山，会英语，德语，法语，毕业于加你福尼亚大学；
4             我是爱德华，来自美国旧金山我是爱德华，来自美国旧金山，会英语，德语，法语，毕业于加你福尼亚大学；
5         </p>
6     </div>
7 </div>

JS代码

 1 <script src="static/js/jquery-3.1.1.min.js"></script>
 2 <script type="text/javascript">
 3     $(document).ready( function() {
 4         $(".checkmore .text").each(function(){
 5             height=$(this).height();
 6             if(height>88) {
 7                 $(this).css("height","88");
 8                 $(this).after("<a class=\"morecon\" >查看更多</a>");
 9             }
10         });
11         $(".morecon").click(function(){
12             $(this).parent().children(".text").css("height","auto");
13             $(this).css("display","none");
14         });
15     });
16 </script>

转载于:https://www.cnblogs.com/tlweb/p/5984983.html

jQuery多余文字折叠效果相关推荐

bootstrap中jquery插件——collapse折叠效果-手风琴效果
先来掌握collapse插件的基本用法,再慢慢深入实例. collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下: <a class="btn b ...
jquery 实现文字闪动效果
有个项目,之前添加记事成功是弹出一个提示框提示,添加成功,产品经理觉得这样不是很友好,但是不提示又不知道是不是添加成功,又不知道明确知道当前添加的是哪一条,所以:想让添加的当条信息闪动几下,然后停止. ...
css2D特效tranform——文字折叠效果
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head><meta charset ...
html产品折叠效果图,Jquery的折叠效果
2015-12-01 16:50:08 在进行web前端开发中,会有一些关于介绍的页面,在这些页面里有类似名词解释的,如果直接将解释和名词放在页面上就会使整个页面显得东西凌乱,且不易于查看自己需要的名 ...
jQuery实现省略指定多余文字
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
jQuery 文本段落展开和折叠效果
找了几个感觉这个效果是最好的,最简单的. jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv=" ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
html轮播文字上下轮播,js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本文字上下无缝轮播 * { margin: 0; ...
html5 文字滑动效果,jQuery滑动文字特效
这是一个很简单的jQuery滑动文字效果.插件中使用了 Lettering.js,你可以在 Github 上找到它. HTML Illustrations 使用data-hover来表示鼠标滑过的元素 ...

jQuery多余文字折叠效果

jQuery多余文字折叠效果相关推荐

最新文章

热门文章