jquery实现点击查看更多内容控制段落文字展开折叠效果


Posted in Javascript onAugust 06, 2015

本文实例讲述了jquery实现点击查看更多内容控制段落文字展开折叠效果。分享给大家供大家参考。具体如下:

这里使用jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容。点击查看更多的功能,在很多大网站都有在用,像一些电影简介、产品介绍有时候为了页面的布局效果,常常默认是隐藏了一部分,用户想看的时候可以点击后展开。

运行效果如下图所示:

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;}
#wrap{position: relative;padding: 10px;overflow: hidden;}
#gradient{width: 100%;height: 35px;background: url() repeat-x;position: absolute;bottom: 0;left: 0;}
#read-more{padding: 5px;border-top: 4px double #ddd;background: #fff;color: #333;}
#read-more a{padding-right: 22px;background: url() no-repeat 100% 50%;font-weight: bold;text-decoration: none;}
#read-more a: hover{color: #000;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 var slideHeight = 75; // px
 var defHeight = $('#wrap').height();
 if(defHeight >= slideHeight){
  $('#wrap').css('height' , slideHeight + 'px');
  $('#read-more').append('<a href="#">点击查看更多。。</a>');
  $('#read-more a').click(function(){
   var curHeight = $('#wrap').height();
   if(curHeight == slideHeight){
    $('#wrap').animate({
     height: defHeight
    }, "normal");
    $('#read-more a').html('点击隐藏');
    $('#gradient').fadeOut();
   }else{
    $('#wrap').animate({
     height: slideHeight
    }, "normal");
    $('#read-more a').html('点击查看更多。。');
    $('#gradient').fadeIn();
   }
   return false;
  });  
 }
});
</script>
</head>
<body>
 <div id="container">
  <h1>jQuery 控制段落文字展开折叠,点击查看更多的功能</h1>
  <h2>About Billabong</h2>
  <div id="wrap">
   <div>
    <p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
    <p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>
   </div>
   <div id="gradient"></div>
  </div>
  <div id="read-more"></div>
 </div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
Extjs4 类的定义和扩展实例
Jun 28 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
token 机制和实现方式
Dec 15 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 #Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 #Javascript
drag-and-drop实现图片浏览器预览
Aug 06 #Javascript
js简单实现标签云效果实例
Aug 06 #Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 #Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 #Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 #Javascript
You might like
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
CentOS安装php v8js教程
2015/02/26 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
python利用opencv实现颜色检测
2021/02/23 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
英语演讲稿范文
2014/01/03 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
家长给学校的建议书
2014/05/15 职场文书
旷工检讨书1000字
2015/01/01 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
奠基仪式致辞
2015/07/30 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android