以下是 jQuery长文本分页特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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=gb2312" />
<title>jQuery���ı���ҳ��Ч</title>
<link href="css/style.css"
rel="stylesheet" type="text/css" />
<link href="css/textify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/textify-min.js"></script>
<script type="text/javascript">
$(document)
.ready(function () {
$('.longText')
.textify({
numberOfColumn: 2,
margin: 20,
padding: 15,
width: "auto",
height: "auto",
showNavigation: true,
textAlign: 'justify'
})
$('.longText2')
.textify({
numberOfColumn: 4,
margin: 20,
padding: 15,
width: "auto",
height: "auto",
showNavigation: true,
textAlign: 'justify'
})
})
</script>
</head>
<body>
<div id="main-header" class="clearfix">
<div class="wrapper">
<div class="col span_6">
<img src="images/demo-images/logo.png" id="logo" />
<div id="content-logo">
<h1>Textify</h1>
<h4>Columnize and Paginate Your Long Text</h4>
</div>
</div>
</div>
</div>
<div class="full-width-wrap clearfix">
<div class="wrapper">
<h2>Fixed-Width Layout</h2>
<div class="wrapContent bg1">
<div class="longText">
<p>
<img src="images/demo-images/image1.jpg" />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
<p>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt, explicabo.</p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor
sit, amet, consectetur, adipisci v'elit, sed quia non numquam eius modi
tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae
consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis
praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias
excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa,
qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id,
quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis
dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut
rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
<p>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt, explicabo.</p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor
sit, amet, consectetur, adipisci v'elit, sed quia non numquam eius modi
tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae
consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis
praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias
excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa,
qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id,
quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis
dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut
rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
<p>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt, explicabo.</p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor
sit, amet, consectetur, adipisci v'elit, sed quia non numquam eius modi
tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae
consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis
praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias
excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa,
qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id,
quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis
dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut
rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.</p>
</div>
<div class="col span_2">
<p><strong>Textify</strong> is a jQuery plugin that allows you to automatically
create an attractive and modern layout for your contents, avoiding to show
your users longer and boring texts. You can choose from a variety of customizations,
including the possibility of having a responsive template.</p>
<p>Take a look at <strong>fullscreen layout</strong> in your mobile device
or try to resize your browser to see the effect.</p>
<p><a class="action-button" href="fullscreen.html" target="_blank">View Fullscreen Layout ▸</a>
</p>
</div>
</div>
</div>
</div>
<div class="full-width-wrap-white clearfix">
<div class="wrapper">
<h2>Full-width Layout</h2>
<div class="wrapContent bg2">
<div class="longText2">
<p>
<img src="images/demo-images/image1.jpg" />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
<p>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt, explicabo.</p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor
sit, amet, consectetur, adipisci v'elit, sed quia non numquam eius modi
tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae
consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis
praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias
excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa,
qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id,
quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis
dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut
rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
<p>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt, explicabo.</p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor
sit, amet, consectetur, adipisci v'elit, sed quia non numquam eius modi
tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae
consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis
praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias
excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa,
qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id,
quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis
dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut
rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
<p>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt, explicabo.</p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor
sit, amet, consectetur, adipisci v'elit, sed quia non numquam eius modi
tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae
consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis
praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias
excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa,
qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id,
quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis
dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut
rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.</p>
</div>
</div>
</div>
</div>
<div class="full-width-wrap-white clearfix">
<div class="wrapper">
<h2>Features</h2>
<div class="wrapContent">
<ul class="features">
<li>
<h4>Cross browser & cross platform</h4>
<p>Textify is compatible with all major browsers (including ie7 to ie9, Firefox
Chrome, Opera, Safari) and mobile platforms like iphone / ipad.</p>
</li>
<li>
<h4>Touch-friendly</h4>
<p>You can use it in a touch device to move pages</p>
</li>
<li>
<h4>Responsive</h4>
<p>Size of pages can be dynamically changed.</p>
</li>
<li>
<h4>Easy to customize</h4>
<p>Textify is easy and highly customizable. You can specify a static number
of columns, or you can just use the default settings. The styles are set
in css for easy editing.</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS代码(textify-min.js):
/* * Textify - Columnize,Paginate and Touch Your Long Text * Programmer:Fabio Ferrante * CodeCanyon:http://codecanyon.net/user/kernelstudio/portfolio * * If this script you like,please put a comment on codecanyon. * * Includes jQuery Easing v1.3 * http://gsgd.co.uk/sandbox/jquery/easing/ * Copyright (c) 2008 George McGinley Smith * jQuery Easing released under the BSD License. * */
(function(e){
e.fn.textify=function(t){
defaults={
numberOfColumn:2,margin:20,padding:15,width:"screen",height:"screen",showNavigation:true,textAlign:"justify",isZoom:false}
;
var n;
var t=e.extend(defaults,t);
return this.each(function(){
function g(){
if(t.width==="auto"){
l=d.width()}
else if(t.width==="screen"){
l=e(window).width()}
else if(typeof t.width=="string"){
l=parseInt(t.width);
if(isNaN(t.width)){
l=defaults.width}
}
else{
l=t.width}
if(t.height==="auto"){
c=d.height()}
else if(t.height==="screen"){
c=e(window).height()}
else if(typeof t.height==="string"){
c=parseInt(t.height);
if(isNaN(t.height)){
c=defaults.height}
}
else{
c=t.height}
return[l,c]}
function b(n){
v=n.clone(true);
m=n.clone(true);
g();
t.startPage=1;
d.empty().append('<div class="textify"/>').children().css({
height:c,width:l}
).append('<div class="contentText"/>');
s=Math.floor((l-t.padding*2-t.margin*(t.numberOfColumn-1))/t.numberOfColumn);
o=c-t.padding*2;
r=d.children(":first");
u=r.children(":first");
L();
if(v.find("img").length>0){
v.find("img").each(function(t){
var n=e(this).attr("src");
var r=e(this);
var i=e("<img />").load(function(){
w(this,r);
if(t+1===v.find("img").length){
E()}
}
).error(function(){
alert("There was a problem with the image file");
return false}
).attr("src",n)}
)}
else{
E()}
}
function w(e,t){
if(e.width>s){
t.css({
display:"block",width:s,margin:0,padding:0}
);
thisNewHeight=e.height*t.width()/e.width;
if(thisNewHeight>=o){
t.css({
display:"block",width:"auto",margin:0,height:o,padding:0}
)}
}
else{
if(e.height>=o-100){
t.css({
display:"block",height:o-100,margin:0,padding:0}
)}
else{
t.css({
display:"block","margin-right":"20px","margin-top":"10px","margin-bottom":"10px"}
)}
}
}
function E(){
r.children().css({
height:c,width:l*t.startPage}
).append('<div class="page'+t.startPage+'" />').children().css({
height:c-t.padding*2,width:l-t.padding*2,padding:t.padding,"float":"left"}
);
a=r.find(".page"+t.startPage);
C()}
function S(t,n){
theBox=n;
if(t.contents().length>0&&v.text().length>0){
t.contents().each(function(){
model=e(this).clone();
model.appendTo(theBox);
if(f.height()>o){
model.detach();
x(e(this),theBox);
return false}
else{
model.detach();
e(this).appendTo(theBox)}
}
)}
}
function x(t,n){
if(t.contents().length>0&&v.text().length>0){
if(t[0].nodeType===1){
T(t);
n.append(tag);
theBox=n.find(nodeName).last()}
else{
theBox=n}
t.contents().each(function(n){
model=e(this).clone();
model.appendTo(theBox);
if(f.height()>o){
model.detach();
if(e(this).contents().length>0){
x(e(this),theBox);
return false}
else if(e(this)[0].nodeName==="IMG"){
C();
return false}
else{
if(t[0].nodeName.toLowerCase()==="li"){
p=true}
else{
p=false}
N(e(this),theBox);
return false}
}
else{
model.detach();
e(this).appendTo(theBox)}
}
)}
else{
allPar=e(t).text().split(".");
y=0;
if(f.height()<=o){
while(f.height()<=o){
n.append(allPar[y]+".");
$prefinish=v.html();
var r=new RegExp("(?![^<>]*>)"+allPar[y]+".");
news=v.html();
news=news.replace(/\ \;
/g," ");
news=news.replace(r,"");
v.html(news);
y++}
v.html($prefinish);
n.html(e(n).html().slice(0,n.html().lastIndexOf(allPar[y-1])));
N(v,theBox)}
}
}
function T(e){
nodeName=e[0].nodeName.toLowerCase();
var t,n,r,i;
i={
}
;
tag="<"+nodeName;
attr=e[0].attributes;
for(t=0;
t<attr.length;
t++){
if(attr[t].specified){
tag=tag+" "+attr[t].name.toLowerCase()+"="+attr[t].value}
}
tag=tag+"/>";
return[nodeName,tag]}
function N(t,n){
textString=e(t).text().replace(/\ \;
/g," ");
allChars=textString.split(/\s+/);
y=0;
if(f.height()>=o){
p=false}
if(f.height()<=o){
while(f.height()<=o){
n.append(allChars[y]+" ");
$prefinish=v.html();
if(allChars[y].indexOf("[")>-1||allChars[y].indexOf("]")>-1||allChars[y].indexOf("(")>-1||allChars[y].indexOf(")")>-1||allChars[y].indexOf("?")>-1||allChars[y].indexOf(".")>-1){
thisChar=allChars[y].replace(/[[]/g,"[[]");
thisChar=thisChar.replace(/[]]/g,"[]]");
thisChar=thisChar.replace(/[(]/g,"[(]");
thisChar=thisChar.replace(/[)]/g,"[)]");
thisChar=thisChar.replace(/[?]/g,"[?]");
thisChar=thisChar.replace(/[.]/g,"[.]")}
else if(allChars[y].indexOf("&")>-1){
thisChar="&"}
else{
thisChar=allChars[y]}
var r=new RegExp("(?![^<>]*>)"+thisChar);
news=v.html();
news=news.replace(/\ \;
/g," ");
news=news.replace(r,"");
v.html(news);
y++}
v.html($prefinish);
n.html(e(n).html().slice(0,n.html().lastIndexOf(allChars[y-1])))}
C()}
function C(){
f=a.children(":last");
f.find("li").filter(function(){
return e(this).text()==""}
).remove();
if(p){
v.find("li:first-child").css("list-style","none");
p=false}
if(t.showNavigation){
if(r.find(".textify_nav").length==0){
r.append('<div class="textify_nav"/>').children().last().css({
left:Math.floor((l-r.find(".textify_nav").width())/2)}
).append("<ul/>").children().attr("class","text_pagination").append(function(){
var n="";
h=r.find(".text_pagination");
for(i=0;
i<t.startPage;
i++){
e("<li/>").appendTo(h).click(function(){
k(e(this))}
);
if(i===0){
h.find("li").attr("class","selected")}
}
}
)}
o=c-t.padding*2-e(".textify_nav").outerHeight()}
if(a.children().length<t.numberOfColumn){
a.append('<div class="column"/>');
f=a.children(":last");
if(a.children().length!==t.numberOfColumn){
f.css("margin-right",t.margin)}
f.css({
width:s,"float":"left","text-align":t.textAlign}
);
setTimeout(function(){
S(v,f)}
,100)}
else{
t.startPage++;
if(t.showNavigation){
if(r.find(".textify_nav").length>0){
e("<li/>").appendTo(h).click(function(){
k(e(this))}
);
r.find(".textify_nav").css({
left:Math.floor((l-r.find(".textify_nav").width())/2)}
)}
}
u.css("width",l*t.startPage);
u.append('<div class="page'+t.startPage+'" />');
a=r.find(".page"+t.startPage);
a.css({
height:c-t.padding*2,width:l-t.padding*2,padding:t.padding,"float":"left"}
);
a.append('<div class="column"/>');
f=a.children(":last");
if(r.find(".column").length!==t.numberOfColumn){
f.css("margin-right",t.margin)}
f.css({
width:s,"float":"left","text-align":t.textAlign}
);
setTimeout(function(){
S(v,f)}
,100)}
return false}
function k(e){
r.find(".text_pagination li").removeClass("selected");
e.addClass("selected");
marginLeft=l*e.index();
u.animate({
marginLeft:[-marginLeft,"easeOutExpo"]}
,600)}
function L(){
var n,i,s,o=u;
o.live("gesturechange",function(e){
t.isZoom=true}
);
o.live("gestureend",function(e){
t.isZoom=false}
);
if(!t.isZoom){
o.bind("touchstart touchmove touchend",function(t){
if(t.originalEvent.touches.length>1)return;
if(t.type=="touchstart"){
i=parseInt(o.css("margin-left"));
s=i;
n=t.originalEvent.touches[0].pageX||t.originalEvent.changedTouches[0].pageX;
startY=t.originalEvent.touches[0].pageY||t.originalEvent.changedTouches[0].pageY}
else if(t.type=="touchmove"){
movX=t.originalEvent.changedTouches[0].pageX-n;
movY=t.originalEvent.changedTouches[0].pageY-startY;
s=i+movX;
if(Math.abs(movY)<Math.abs(movX)){
o.css("margin-left",s+"px");
t.preventDefault()}
}
else if(t.type=="touchend"){
if(Math.abs(movY)<Math.abs(movX)){
r.find(".text_pagination").children().each(function(){
if(e(this).hasClass("selected")&&i!==s){
if(s<i&&e(this).index()+1<r.find(".text_pagination").children().length){
obj=e(this).next()}
else if(s>i&&e(this).index()+1>1){
obj=e(this).prev()}
else{
obj=e(this)}
s=i;
k(obj);
return false}
}
)}
}
}
)}
}
var r,s,o,u,a,f,l,c,h,p=false;
var d=e(this);
var v=e(this).clone(true);
var m=e(this);
b(v);
e(window).resize(function(){
g();
if(l!==e(".textify").width()||c!==e(".textify").height()){
clearInterval(n);
d.empty();
d.next(".textify_nav").remove();
n=setTimeout(function(){
b(m)}
,200)}
}
)}
)}
}
)(jQuery)CSS代码(style.css):
body{width:100%;height:100%;margin:0;padding:0;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.wrapper{margin:0 auto;min-width:950px;width:90%;}
.wrapContent{width:100%;float:left;padding-bottom:60px;}
.wrapContent .features{list-style:none;margin:0;padding:0;width:100%;float:left;}
.wrapContent .features li{float:left;width:25%;}
.wrapContent .features li p,h4{padding:0 10px;color:#575757;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;font-size:13px;}
.wrapContent .features h4{font-size:16px;font-weight:bold;margin:20px 0 8px;}
.bg1{background:url(../images/demo-images/bg_spot.png) bottom left no-repeat;}
.bg2{background:url(../images/demo-images/bg_spot2.png) bottom center no-repeat;}
#main-header{color:#000000;margin-bottom:16px;margin-top:16px;position:relative;}
.col{font-family:league-gothic,sans-serif;font-size:14px;line-height:22px;margin-left:50px;margin-top:20px;text-align:left;}
.span_6{margin-left:0;width:100%;}
#logo{float:left;}
#content-logo{float:left;}
#content-logo h1{display:block;margin:0;padding:0;text-transform:uppercase;margin:5px 0 0 15px;color:#666;}
#content-logo h4{display:block;margin:0;padding:0;text-transform:uppercase;margin:5px 0 0 20px;font-size:11px;color:#ccc;}
.full-width-wrap{background:#EEEEEE;padding:16px 0 60px 0;width:100%;float:left;}
.full-width-wrap-white{padding:15px 0 0 0;width:100%;float:left;}
.longText{float:left;font-size:14px;line-height:22px;font-family:league-gothic,sans-serif;text-align:left;width:600px;height:500px;background:#ffffff;margin-right:20px;border:5px solid #ccc;}
.longText2{float:left;font-size:14px;line-height:22px;font-family:league-gothic,sans-serif;text-align:left;width:100%;height:500px;background:#eeeeee;}
a.action-button{background:none repeat scroll 0 0 #DADADA;color:#CC0000;padding:8px 12px 9px;text-decoration:none;}
a.action-button:hover{background:none repeat scroll 0 0 #CC0000;color:#FFFFFF;text-decoration:none;}
p{margin:13px 0 0 0;}
h2{font-size:24px;line-height:26px;margin:0 0 12px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;}
CSS代码(textify.css):
.textify{/*overflow:hidden;*/
font-family:Tahoma,Geneva,sans-serif;font-size:13px;overflow:hidden;position:relative;}
.textify img{float:left;}
.textify_nav{margin:10px 0;position:absolute;bottom:0;}
.textify_nav ul{margin:0;padding:0;}
.textify_nav ul li:hover,.textify_nav ul li.selected{background-position:0 -15px;}
.textify_nav ul li{background-image:url("../images/textify_nav.png");background-repeat:no-repeat;float:left;height:15px;list-style:none outside none;margin-left:3px;margin-right:3px;width:15px;cursor:pointer;}
.contentText{margin-left:0;float:left;}
分享到QQ
分享到微博
微信扫一扫
