To implement a footer, we need the following elements:Copy codeThe Code is as follows: <div id = "article1">
CSS <span class = "footnote"> CSS is short for Cascading Style Sheet. It is translated as "stacked style form 」. It is a markup language used to (enhance) control webpage styles and allow separation of style information from webpage content. </Span>
</Div>
<Div id = "artnotes1" class = "footnoteHolder"> </div>
Where:
Article 1 is the subject of the text you need To footer
<Span class = "footnote">... </span> is the annotation content. Both the label span and class can be configured.
Artnotes1 is the place where the footer is displayed
Follow the default call method settings:Copy codeThe Code is as follows: <script type = "text/javascript">
Var footnote = new footNotes ();
Footnote. format ('article1', 'artnotes1 ');
</Script>
If you want to customize some content, you can use the following method:Copy codeThe Code is as follows: <script type = "text/javascript">
Var footnote = new footNotes ();
Footnote. footNoteClassName = "footnote2 ";
Footnote. footNoteTagName = "em ";
Footnote. footNoteBackLink = "[back «]";
Footnote. format ('article1', 'artnotes1 ');
</Script>
Test code: Save and run the following code.Copy codeThe Code is as follows: <! 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"/>
<Meta name = "keywords" content = "comment, css, Javascript, footnote, footer,"/>
<Meta name = "description" content = "Footnote (Footnote) is the best way to provide more information to users. It is also an effective supplement to the subject information and is common in various printed books. However, since the footer has these benefits, we certainly need to make use of it on the webpage. This article introduces you to how to implement the footer effect using Javascript and CSS. "/>
<Title> use Javascript and CSS to implement Footnote effects-comments, css, Javascript, footnote, and footer. </title>
</Head>
<Body>
<Div class = "ad">
</Div>
<Br/>
<Div id = "example">
<H3 id = "example_title"> implement Footnote effect using Javascript and CSS <Div id = "example_main">
<! -- ************************************ Instance code start ************************************ -->
<Style type = "text/css">
A {
Font-weight: bold;
Text-decoration: none;
Color: # f30;
}
A: hover {
Color: # FFA200;
}
# Wrapper {
Width: 500px;
Margin: 0 auto;
Text-align: left;
}
# Wrapper p {line-height: 200%; font-size: 14px ;}
/*
========================================================== ==========
Styling for footnotes begins here
========================================================== ==========
*/
Div. footnoteHolder {
Border-left: 1px solid # ccc;
Margin: 20px 0 50px 20px;
Padding: 20px 10px;
Font-size: 12px;
Line-height: 150%;
}
Span. footnote {
Vertical-align: super;
Font-size: 10px;
}
Ul. footnote, ul. footnote li {
Margin: 0;
Padding: 0;
}
Ul. footnote li {
List-style-type: decimal;
Margin: 3px 0 3px 20px;
Color: #777;
}
Em. footnote2 {
Vertical-align: super;
Font-size: 10px;
}
Ul. footnote2, ul. footnote2 li {
Margin: 0;
Padding: 0;
}
Ul. footnote2 li {
List-style-type: decimal;
Margin: 3px 0 3px 20px;
Color: #678BB2;
}
</Style>
<Script type = "text/javascript">
// Note: use Javascript and CSS to implement the Footnote effect.
// Author: CodeBit.cn (http://www.CodeBit.cn)
Var footNotes = function (){};
FootNotes. prototype = {
FootNoteClassName: "footnote", // className of the footer
FootNoteTagName: "span", // Tag Name of the footer
FootNoteBackLink: "[back]", // return link
Format: function (contentID, footnoteID)
{
If (! Document. getElementById) return false;
Var content = document. getElementById (contentID );
Var footnote = document. getElementById (footnoteID );
Var spans = content. getElementsByTagName (this. footNoteTagName );
Var noteArr = [];
Var note = 0;
Var elContent;
Var len = spans. length;
For (I = 0; I <len; I ++)
{
Note ++;
If (spans [I]. className = this. footNoteClassName)
{
// Obtain the footer content
ElContent = spans [I]. innerHTML;
NoteArr. push (elContent );
// Create a link to the footer
Var newEle = document. createElement ("");
NewEle. href = '# ftn _' + footnoteID + '_' + note;
NewEle. title = "show footnote ";
NewEle. id = 'ftnlink _ '+ footnoteID +' _ '+ note;
NewEle. innerHTML = note;
// Clear the original content
While (spans [I]. childNodes. length)
{
Spans [I]. removeChild (spans [I]. firstChild );
}
Spans [I]. appendChild (newEle );
}
}
// Create a comment list
Var ul = this. _ buildNoteList (noteArr, footnoteID );
Footnote. appendChild (ul );
},
_ BuildNoteList: function (notes, noteID)
{
If (! Notes | notes. length <1) return;
Var ul = document. createElement ('ul ');
Ul. className = this. footNoteClassName;
Var li;
Var len = notes. length + 1;
For (I = 1; I <len; I ++)
{
Li = document. createElement ('lil ');
Li. id = "ftn _" + noteID + "_" + I;
Li. innerHTML = notes [I-1];
// Create a [Return] Link
Var link = document. createElement ("");
Link. href = "# ftnlink _" + noteID + "_" + I;
Link. innerHTML = this. footNoteBackLink;
Li. appendChild (link );
Ul. appendChild (li );
}
Return ul;
}
};
</Script>
<Div id = "wrapper">
<Div id = "content">
<Div id = "article1">
<H2> Article 1 <P> in programming, we usually accumulate a lot of simple, effective, and reusable small pieces of code, A simple string processing function <span class = "footnote"> is used to assign a unique output value to Wikipedia for each input ). </Span> or a Regular Expression <span class = "footnote"> Regular Expression describes a string matching mode, it can be used to check whether a string contains a seed string, replace matched substrings, or retrieve substrings that meet certain conditions from a string. </Span>, or a simple File Upload class, or even a good CSS <span class = "footnote"> CSS is short for Cascading Style Sheet. It is translated as "stacked style form 」. It is a markup language used to (enhance) control webpage styles and allow separation of style information from webpage content. </Span> navigation style. These tips save us a lot of time, but after a long time, the number of codes is increasing, and it takes a lot of time to find them. Therefore, this site is committed to collecting and sorting out some similar small knowledge, and strive to improve the quality of the article search, so as to facilitate your reference, and also to support the Open Source Business.
</P>
<P> the code and tutorials collected on this site include functions and classes extracted from the world's famous open-source software. <span class = "footnote"> classes are definitions of an object. It contains information about the object action method, including its name, method, attribute, and event. </Span> some excellent original or translated articles submitted by netizens. The standards of code included on this site are simple, brilliant, and universal.
</P>
</Div>
<Div id = "artnotes1" class = "footnoteHolder"> </div>
<Div id = "article2">
<H2> Article 2 <P> in programming, we usually accumulate a lot of simple, effective, and reusable small pieces of code, A simple string processing function <em class = "footnote2"> assigns a unique output value to Wikipedia for each input ). </Em> or a Regular Expression <em class = "footnote2"> Regular Expression describes a string matching mode, it can be used to check whether a string contains a seed string, replace matched substrings, or retrieve substrings that meet certain conditions from a string. </Em>, or a simple File Upload class, or even a good CSS <em class = "footnote2"> CSS is short for Cascading Style Sheet. It is translated as "stacked style form 」. It is a markup language used to (enhance) control webpage styles and allow separation of style information from webpage content. </Em> navigation style. These tips save us a lot of time, but after a long time, the number of codes is increasing, and it takes a lot of time to find them. Therefore, this site is committed to collecting and sorting out some similar small knowledge, and strive to improve the quality of the article search, so as to facilitate your reference, and also to support the Open Source Business.
</P>
<P> the code and tutorials collected on this site include functions and classes extracted from the world's famous open-source software. <em class = "footnote2"> classes are definitions of an object. It contains information about the object action method, including its name, method, attribute, and event. </Em> some excellent original or translated articles submitted by netizens. The standards of code included on this site are simple, brilliant, and universal.
</P>
</Div>
<Div id = "artnotes2" class = "footnoteHolder"> </div>
</Div>
<Script type = "text/javascript">
// <! [CDATA [
Var footnote = new footNotes ();
Footnote. format ('article1', 'artnotes1 ');
Var footnote2 = new footNotes ();
Footnote2.footNoteClassName = "footnote2 ";
Footnote2.footNoteTagName = "em ";
Footnote2.footNoteBackLink = "[back «]";
Footnote2.format ('article2', 'artnotes2 ');
//]>
</Script>
</Div>
<! -- ************************************ Instance code end with ************************************ -->
</Div>
<Div id = "back"> <a href = "/pub/html/javascript/tip/footnotes_with_javascript_and_css/"> return "using Javascript and CSS to implement Footnote) effect </a> </div>
</Div>
<Br/>
<Div class = "ad">
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
