jquery實(shí)現(xiàn)的一個(gè)文章自定義分段顯示功能
更新時(shí)間:2014年05月23日 15:09:05 作者:
基于jquery實(shí)現(xiàn)的文章自定義分段顯示,如果文章內(nèi)容太多的話轉(zhuǎn)換有點(diǎn)慢,大家若喜歡的話,可以參考下
這樣的顯示風(fēng)格是不是很養(yǎng)眼???如果文章內(nèi)容太多的話轉(zhuǎn)換有點(diǎn)慢,希望大家能給我提出寶貴的意見(jiàn)。
復(fù)制代碼 代碼如下:
<!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方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng)</div>
</center>
</body>
</html>
相關(guān)文章
淺析ajax請(qǐng)求json數(shù)據(jù)并用js解析(示例分析)
這應(yīng)該是每個(gè)web開(kāi)發(fā)的人員都應(yīng)該掌握的基礎(chǔ)技術(shù),需要的朋友可以參考下2013-07-07
jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加、元素獲取與事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)右下角tab樣式在線客服效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)右下角tab樣式在線客服效果代碼,涉及jQuery簡(jiǎn)單樣式變換控制技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
Jquery easyui開(kāi)啟行編輯模式增刪改操作
jquery easyui框架提供了創(chuàng)建網(wǎng)頁(yè)所需要的一切,可以幫助大家建立站點(diǎn),接下來(lái),通過(guò)本文給大家介紹Jquery easyui開(kāi)啟行編輯模式增刪改操作,感興趣的朋友一起學(xué)習(xí)2016-01-01
jQuery maxlength文本字?jǐn)?shù)限制插件
相信大家對(duì)twitter類的微博客都不陌生,作為一句話博客其字?jǐn)?shù)即時(shí)提示效果設(shè)計(jì)的非常人性化.2010-04-04
jQuery+jsp下拉框聯(lián)動(dòng)獲取本地?cái)?shù)據(jù)的方法(附源碼)
這篇文章主要介紹了jQuery+jsp下拉框聯(lián)動(dòng)獲取本地?cái)?shù)據(jù)的方法,以實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合jsp實(shí)現(xiàn)下拉聯(lián)動(dòng)菜單讀取本地?cái)?shù)據(jù)的相關(guān)技巧,并附帶了完整源碼供讀者下載參考,需要的朋友可以參考下2015-12-12

