jquery实现的一个文章自定义分段显示功能


Posted in Javascript onMay 23, 2014

jquery实现的一个文章自定义分段显示功能 
这样的显示风格是不是很养眼啊?如果文章内容太多的话转换有点慢,希望大家能给我提出宝贵的意见。

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>文章分段</title> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script> 
var o = ""; 
$(function(){ 
o = $(".content").html(); 
}) 
function change(){ 
var lw = 0; 
var maxs = 0; 
var line = $("#line").val(); 
var h = o.split(""); 
var webh = ""; for(var i =0;i<h.length;i++){ 
webh+='<label>'+h[i]+'</label>'; 
} 
$(".content").html(webh); 
$(".content label").each(function(){ 
if(maxs > $(this).position()['left']){ 
lw++; 
maxs =0; 
if(lw==line){ 
$(this).before('<br/><br/>'); 
lw = 0; 
} 
} 
maxs = Math.max($(this).position()['left'],maxs); 
}) 
} 
</script> 
<style> 
.content{width:50%; margin:auto; padding:15px; border:10px solid #6CF; text-align:left; line-height:20px; font-size:12px; font-family:Arial, Helvetica, sans-serif; position:relative;margin:0px;} 
.content label{ display:inline-block; border:0; padding:0px;margin:0px;} 
</style> 
</head> 
<body> 
<center><input id="line" type="text" value="3" /> <input type="button" onclick="change()" value="改变" /> 
<div class="content"> 
jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项</div> 

</center> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
JavaScript基础心法 数据类型
Mar 05 Javascript
npm 语义版本控制详解
Sep 10 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 #Javascript
ie 7/8不支持trim的属性的解决方案
May 23 #Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 #Javascript
jquery重复提交请求的原因浅析
May 23 #Javascript
jquery仿搜索自动联想功能代码
May 23 #Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 #Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 #Javascript
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
css3学习心得分享
2013/08/19 HTML / CSS
艺术设计专业个人求职信
2013/09/21 职场文书
九年级家长会邀请函
2014/01/15 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
食品安全演讲稿
2014/09/01 职场文书
工程安全生产协议书
2014/11/21 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
小学英语听课心得体会
2016/01/14 职场文书