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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
33道php常见面试题及答案
2015/07/06 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
window.open的功能全解析
2006/10/10 Javascript
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
JavaScript数组去重的几种方法
2019/04/07 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
python中 logging的使用详解
2017/10/25 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
历史系毕业生自荐信
2013/10/28 职场文书
父母对孩子说的话
2014/04/12 职场文书
业务员岗位职责
2015/02/03 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
七一晚会主持词
2015/06/29 职场文书
欢迎新生标语2015
2015/07/16 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
五年级语文教学反思
2016/03/03 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
Python基础之变量的相关知识总结
2021/06/23 Python
用JS创建一个录屏功能
2021/11/11 Javascript
python解析json数据
2022/04/29 Python