jQuery实现文本展开收缩特效


Posted in Javascript onJune 03, 2015

在网页上只有一个小区域,但是说明性的文字又很长,下面这段脚本实现的是长文字的部分显示。
当用户点击展开时,文字展开,收缩时文字收缩。

本来用jQuery自带的toggle()就可以写,但是我做的时候 toggle一直不work,所以就用了click + 标志位来做的

<script language="javascript" src="jquery.js"></script>
<script language="javascript">
var cur_status = "less";
$.extend({
show_more_init:function(){
//alert("show_more_init!");
var charNumbers=$(".content").html().length;//总字数
var limit=100;//显示字数
if(charNumbers>limit)
{
var orgText=$(".content").html();//原始文本
var orgHeight=$(".content").height();//原始高度
var showText=orgText.substring(0,limit);//最终显示的文本
$(".content").html(showText);
var contentHeight=$(".content").height();//截取内容后的高度
$(".switch").click(
function() {
if(cur_status == "less"){
$(".content").height(contentHeight).html(orgText).animate({ height:orgHeight}, { duration: "slow" });
$(this).html("收缩");
cur_status = "more";
}else{
$(".content").height(orgHeight).html(showText).animate({ height:contentHeight}, { duration: "fast" });
$(this).html("展开");
cur_status = "less";
}
}
);
}
else
{
$(".switch").hide();
}
}
});
$(document).ready(function(){
$.show_more_init();
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
#limittext{
width:640px;
height:auto;
position:relative;
background-color:#ccc;
color:black;
}
.switch{
font-size:12px;
text-align:center;
cursor:pointer;
font-family:Verdana;
font-weight:800;
position:absolute;
bottom:0;
width:100%;
/*background:url(more-bg.png) repeat-x bottom;*/
height:40px;
line-height:80px;
}
</style>
</head>
<body>
<div id="limittext" >
<div class="content" style="padding-bottom:15px;">
这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字
</div>
<div class="switch">展开</div>
</div>
</body>
</html>

方法二:

<!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>
<title>jQuery实现DIV层的收缩展开效果</title>
<script type="text/javascript" src="/images/jquery.js"></script>
<style>
/* 收缩展开效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1px solid #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
  $(".box h1").toggle(function(){
   $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
  },function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
  });
});
</script>
<!-- 收缩展开效果 -->
<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
</div>
</div>
<br />

<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
    1<br />
    2<br />
</div>
</div>
<br>
<font color=red>第一次运行请刷新一下页面。</font>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
javascript实现表单验证
Jan 29 Javascript
学习javascript文件加载优化
Feb 19 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 #Javascript
jQuery插件制作之全局函数用法实例
Jun 01 #Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 #Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 #Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 #Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 #Javascript
js事件监听器用法实例详解
Jun 01 #Javascript
You might like
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python3中rank函数的用法
2019/11/27 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
python中round函数如何使用
2020/06/19 Python
C++面试题目
2013/06/25 面试题
诉讼代理人授权委托书
2014/04/08 职场文书
测控技术自荐信
2014/06/05 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
离婚协议书范本
2015/01/26 职场文书
学校实习推荐信
2015/03/27 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL