欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jquery实现的一个文章自定义分段显示功能

程序员文章站 2022-07-25 18:51:17
jquery实现的一个文章自定义分段显示功能。 这样的显示风格是不是很养眼啊？如果文章内容太多的话转换有点慢，希望大家能给我提出宝贵的意见。 . 代码如下: <...

jquery实现的一个文章自定义分段显示功能。

jquery实现的一个文章自定义分段显示功能

这样的显示风格是不是很养眼啊？如果文章内容太多的话转换有点慢，希望大家能给我提出宝贵的意见。

. 代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>文章分段</title>
<script src="https://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="改变" />
<p 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方法注意事项</p>


</center>
</body>
</html>

上一篇： MWC发布没跑了 三星S9手机已经通过3C认证

下一篇： 元旦要买的国产手机推荐

推荐阅读