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 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 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
PHP中用hash实现的数组
2011/07/17 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
python sleep和wait对比总结
2021/02/03 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
考试不及格的检讨书
2014/01/22 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
简历里的自我评价范文
2014/02/24 职场文书
总账会计岗位职责
2014/03/13 职场文书
研究生导师推荐信
2014/09/06 职场文书
2014年营销工作总结
2014/11/22 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书