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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
完美的js图片轮换效果
Feb 05 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
总结js中的一些兼容性易错的问题
Dec 18 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP图片水印类的封装
2017/07/06 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
利用js对象弹出一个层
2008/03/26 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python简单获取数组元素个数的方法
2015/07/13 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
科学育儿宣传标语
2014/10/08 职场文书
详解Django的MVT设计模式
2021/04/29 Python
python数字图像处理:图像简单滤波
2022/06/28 Python