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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
js类中获取外部函数名的方法
Aug 19 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
Javascript事件实例详解
Nov 06 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
React优化子组件render的使用
May 12 Javascript
在vue中嵌入外部网站的实现
Nov 13 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设计模式之代理模式的深入解析
2013/06/13 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
python实现从wind导入数据
2019/12/03 Python
python groupby 函数 as_index详解
2019/12/16 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
AJax面试题
2014/11/25 面试题
小学生新学期寄语
2014/01/19 职场文书
银行求职信范文
2014/05/26 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
门卫岗位职责
2015/02/09 职场文书
安徽导游词
2015/02/12 职场文书
加薪通知
2015/04/25 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技