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 相关文章推荐
javascript各种复制代码收集
Sep 20 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
jquery json 实例代码
Dec 02 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
JavaScript canvas实现文字时钟
Jan 10 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表单提交问题的解决方法
2011/04/12 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
php实现websocket实时消息推送
2018/03/30 PHP
PDO::getAttribute讲解
2019/01/28 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
JS常用知识点整理
2017/01/21 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
python去除所有html标签的方法
2015/05/05 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
法定代表人授权委托书
2014/04/04 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
客房服务员岗位职责
2015/02/09 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏