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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery遍历页面所有CheckBox查看是否被选中的方法

    本文实例讲述了jQuery遍历页面所有CheckBox查看是否被选中的方法.分享给大家供大家参考.具体如下: $('#tbl').find(':checkbox').each(function(){ if ($(this).is(":checked")) { //操作 } }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • jquery实现移动端点击图片查看大图特效

    jquery实现移动端点击图片查看大图特效

    本文的需求很简单:点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 具体实现代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css&quo

  • 基于jQuery实现表格的查看修改删除

    基于jQuery实现表格的查看修改删除

    效果图: HTML: <table id="table"> <tr> <th>姓名</th> <th>年龄</th> <th>职位</th> <th>薪资</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>23</td> <td&

  • 查看源码的工具 学习jQuery源码不错的工具

    查看源码的工具 学习jQuery源码不错的工具

    使用jQuery还可以让我们从各大浏览器不兼容的噩梦中解脱出来,最新版的jQuery还增强的对HTML5的支持,使得我们更加应该使用它.但是jQuery的源码很长,有些地方的实现还很巧妙,使得我们仅仅会javascript也未必能很好的理解每个函数是怎么运行的.下面就让我分享我学习jQuery源码的时候使用的几个工具和应该了解的问题. 这个jquery源代码查看器,还不是很强大,只是能够简单的查看函数引用,但是不能返回. 我上这个网上下载下来了,准备改进一下,你们可以先下载来用一用,有什么意见和

  • jQuery实现简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易,代码也比较简单 图片查看器主要有几个功能: 1.显示图片和图片信息(图片名称.发布者等等) 2.切换图片 3.关闭图片查看器 初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig) picInfos: 传入图片组信息,必须,格式如

  • jQuery实现点击查看大图并以弹框的形式居中

    jQuery实现点击查看大图并以弹框的形式居中,实现的关键代码如下所示: *{margin:0;padding:0;} .tab_bg{display:none;width:100%;height:100%;background:#282829;z-index:99;position:absolute;} .tab_img{width:100px;height:100px;margin:20px;} .tab_img img{width:100%;height:100%;} .bigImg{di

  • jquery实现鼠标滑过小图查看大图的方法

    本文实例讲述了jquery实现鼠标滑过小图查看大图的方法.分享给大家供大家参考.具体实现方法如下: 1. CSS部分: <style type="text/css"> ul{ list-style:none; } li{ float:left; margin-left:10px; } img{ border:#CCCCCC solid 1px; } #max{ position:absolute; display:none; /*隐藏层*/ } </style>

  • jQuery根据纬度经度查看地图处理程序

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> //在这里要注意js的引入顺序 <link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css" /> <link href="

  • 基于jQuery实现的查看全文功能【实用】

    话不多说,请看具体实例 自己引用jQuery.js版本 查看全文---收起(文本内容少于四行,不显示查看全文---收起,超过五行时才显示出来并有此功能) <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery1.7.2.min.js"></s

  • JQuery中form验证出错信息的查看方法

    JQuery中form验证出错,可以采用以下方式来查看具体input的出错信息 复制代码 代码如下: If(!$('form').valid()) { $($('form').validate().errorList).each(function (index, item) { Console.log($($(item).attr('element)).attr('name') + ' ' + $($(item).attr('element)).attr('message')); }); }

  • 查看大图功能代码jquery版

    复制代码 代码如下: /*查看大图*/ var screenheight = $(window).height(); var screenwidth = $(window).width(); var loadCSS = function(){ var screenwidth = $(window).width(); var screenheight = $(window).height(); $("div.lookBigPicture").css({"left":s

  • jQuery输入城市查看地图使用介绍

    jQuery输入城市查看地图使用介绍

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> //在这里要注意js引入的先后顺序 <link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css" /> <link href=&qu

随机推荐