jquery實現(xiàn)的一個文章自定義分段顯示功能
更新時間:2014年05月23日 15:09:05 作者:
基于jquery實現(xiàn)的文章自定義分段顯示,如果文章內容太多的話轉換有點慢,大家若喜歡的話,可以參考下

這樣的顯示風格是不是很養(yǎng)眼???如果文章內容太多的話轉換有點慢,希望大家能給我提出寶貴的意見。
復制代碼 代碼如下:
<!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 獲取和設置select下拉框的值實現(xiàn)代碼
jQuery獲取和設置select下拉框值的實現(xiàn)代碼。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11jQuery操作CheckBox的方法介紹(選中,取消,取值)
本篇文章主要是對jQuery操作CheckBox的方法(選中,取消,取值)進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jQuery實現(xiàn)的多張圖無縫滾動效果【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的多張圖無縫滾動效果,可實現(xiàn)自定義向左或向右滾動的功能,涉及jQuery結合時間函數動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下2016-09-09jQuery實現(xiàn)簡單網頁遮罩層/彈出層效果兼容IE6、IE7
自寫寫的一個jQuery插件,可以實現(xiàn)簡單網頁遮罩層/彈出層功能,并且兼容IE6、IE7,需要的朋友可以參考下2014-06-06