jQuery实现长文字部分显示代码


Posted in Javascript onMay 13, 2013

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

本来用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>
Javascript 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
js实现二级导航功能
Mar 03 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
介绍一下28个JS常用数组方法
May 06 Javascript
jq选项卡鼠标延迟的插件实例
May 13 #Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 #Javascript
怎么清空javascript数组
May 11 #Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 #Javascript
js运动框架_包括图片的淡入淡出效果
May 11 #Javascript
jQuery判断iframe中元素是否存在的方法
May 11 #Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 #Javascript
You might like
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
js实现简单扫雷
2020/11/27 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
python根据多个文件名批量查找文件
2019/08/13 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
Yahoo-PHP面试题2
2014/12/06 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
经济信息管理专业大学生求职信
2013/09/27 职场文书
行政管理专业推荐信
2013/11/02 职场文书
八年级英语教学反思
2014/01/09 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
食品安全承诺书范文
2014/08/29 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书