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 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
Javascript 解构赋值详情
Nov 17 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
解析isset与is_null的区别
2013/08/09 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
基于Django实现日志记录报错信息
2019/12/17 Python
python实现简单的购物程序代码实例
2020/03/03 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
SQL语言面试题
2013/08/27 面试题
微信营销策划方案
2014/02/24 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
优化Mysql查询的示例
2022/04/26 MySQL