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 相关文章推荐
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
js验证账户名是否重复
May 26 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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
php分页示例分享
2014/04/30 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
php实现文件上传基本验证
2020/03/04 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
python正则表达式爬取猫眼电影top100
2018/02/24 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
企划经理的岗位职责
2013/11/17 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
关于mysql中string和number的转换问题
2022/06/14 MySQL