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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
vue中touch和click共存的解决方式
Jul 28 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 变量的定义方法
2010/01/26 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
原生js实现购物车
2020/09/23 Javascript
python从入门到精通(DAY 3)
2015/12/20 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Django用户身份验证完成示例代码
2020/04/03 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
python3中编码获取网页的实例方法
2020/11/16 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
质检部部长职责
2013/12/16 职场文书
期末学生评语大全
2014/04/24 职场文书
机械专业技术员求职信
2014/06/14 职场文书
2016新年致辞
2015/08/01 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers