jquery实现的一个文章自定义分段显示功能
2014-05-23 00:00
731 查看
这样的显示风格是不是很养眼啊?如果文章内容太多的话转换有点慢,希望大家能给我提出宝贵的意见。
<!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>
相关文章推荐
- jquery实现的一个文章自定义分段显示功能
- 利用jQuery 实现一个简单的侧边菜单隐藏显示功能
- jquery 文章自定义分段显示
- 使用jQuery tag handler开发一个带有标签功能的文章发布系统
- jQuery实现GridView列表自定义显示列
- 实现长文章的自动分页显示功能
- 对《自定义GridView分页模板中页码Button的实现》中程序的改进,追加显示空行功能
- JAVA SPRING MVC 实现一个简单的页面显示功能
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- DJ--一个实现了jQuery功能的asp.net webcontrol
- 写一个HTML页面,实现以下功能,左键点击页面时显示“您好”,右键点击时显示“禁止右键”。并在2秒钟后自动关闭页面
- 以上的文章是我解决这样一个问题时候的大致的思路: 把Matlab读取二进制文件的函数变成VBA读取二进制文件,实现同样的功能
- 使用jQuery tag handler开发一个带有标签功能的文章发布系统
- 利用模板类编写一个程序,实现双向链表的插入、删除、查找、显示的功能。
- 图片预加载:jquery 图片预加载功能,可以实现先模糊在清晰的显示
- 对《自定义GridView分页模板中页码Button的实现》中程序的改进,追加显示空行功能
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- jquery实现的一个提前搜索功能
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容