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 相关文章推荐
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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获取用户浏览器版本的方法
2015/01/03 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Vue实现web分页组件详解
2017/11/28 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
交警个人先进事迹材料
2014/05/11 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP