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入门教程(3) js面向对象
Jan 31 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
详解package.json版本号规则
Aug 01 Javascript
js实现3D旋转效果
Aug 18 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
php之可变变量的实例详解
2017/09/12 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python中print函数简单使用总结
2019/08/05 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python能开发游戏吗
2020/06/11 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
DataList 能否分页,请问如何实现?
2015/05/03 面试题
军校本科大学生自我评价
2014/01/14 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
归元寺导游词
2015/02/06 职场文书
红色电影观后感
2015/06/18 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技