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之AJAX框架使用说明
Apr 24 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
H5实现手机拍照和选择上传功能
Dec 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php empty()与isset()区别的详细介绍
2013/06/17 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
win与linux系统中python requests 安装
2016/12/04 Python
对python中return和print的一些理解
2017/08/18 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
如何编写python的daemon程序
2021/01/07 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
认识深刻的检讨书
2014/02/16 职场文书
企业授权委托书范本
2014/09/22 职场文书
三方股东合作协议书
2014/10/28 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
2015年电教工作总结
2015/05/26 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
人民币符号
2022/02/17 杂记