<! 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" lang = "gb2312">
<Head>
<Title> static page turning effect implemented by CSS + JS </title>
<Style type = "text/CSS">...
*{
Font: normal 12px/1.5em "Microsoft yahei", tahoma;
_ Font: normal 12px/1.5em tahoma;/** // * CSS hack for IE6 */
Border: 0px;
Margin: 0px;
Padding: 0px;
Overflow: hidden;
Text-Decoration: none;
* Text-overflow: ellipsis;/** // * CSS hack for IE7 & IE6 */
}
A {
Color: #333;
}
A: link {
Color: #333;
}
A: active {color: # ff6600}
A: hover {
Color: # 06c;
}
Body {
Background: # f3faff;
Text-align: center;
}
Ul {
List-style-type: none;
}
Li {
Margin-bottom: 13px;/** // * CSS hack for Firefox */
* Margin-bottom: 12px;/** // * CSS hack for IE7 & IE6 */
_ Margin-bottom: 3%;/** // * CSS hack for IE6 */
White-space: nowrap;
}
# Main_news {
/** // * Background-color: teal ;*/
Border: 1px # acd0f0 solid;
Width: 445px;
Height: 402px;
}
# Content {
Width: pixel PX;
Height: 372px;
Margin: 10px 10px 0px 10px;
_ Margin: 10px 5px 0px 5px;/** // * CSS hack for IE6 */
Overflow: hidden;
Text-align: left;
}
# Pages {
Width: 445px;
Height: 20px;
Margin: 0px;
Text-align: right;
}
# Pages a: link {color :# 000000}
# Pages a: hover {color: # ff0000}
# Pages a: Active {color: # 3300ff}
</Style>
<SCRIPT defer = "Defer" Language = "JavaScript" type = "text/JavaScript">
<! --
VaR _ offset = 0;
Function _ $ ID (_ OBJ ){
Return document. getelementbyid (_ OBJ );
}
Function _ $ pages (_ I ){
_ $ ID ("content"). scrolltop = (_ $ ID ("content"). clientheight * _ I );
For (VAR I = 0; I <(_ $ ID ("content"). scrollheight/_ offset); I ++)
{
If (I = _ I)
_ $ ID ("soojs _" + (_ I + 1). style. backgroundcolor = "# ff9900 ";
Else
_ $ ID ("soojs _" + (I + 1). style. backgroundcolor = "";
}
}
Function _ $ initpages (){
VaR _ S = '';
_ Offset = _ $ ID ("content"). clientheight;
VaR _ Top = _ $ ID ("content"). scrolltop;
For (VAR I = 0; I <(_ $ ID ("content"). scrollheight/_ offset); I ++ ){
_ S + = ('<a href = "javascript: void (0);" onclick = "javascript: _ $ pages (' + I + '); "onfocus =" this. blur () "Title =" Page & nbsp; '+ (I + 1) +' "id =" soojs _ '+ (I + 1) + '">' +" & nbsp; "+ (I + 1) +" & nbsp; "+ '</a> & nbsp; & nbsp ;');
}
_ $ ID ("pages"). innerhtml = _ s;
_ $ ID ("soojs _" + 1). style. backgroundcolor = "# ff9900 ";
}
// -->
</SCRIPT>
</Head>
<Body onload = "_ $ initpages ();">
<Div id = "main_news"> <! -- Main news -->
<Div id = "content">
<Ul>
<Li> <SPAN class = "type"> [text and text] </span> notice of the Scientific Research Office on scientific research achievement registration </LI>
<Li> <SPAN class = "type"> [Image and text] </span> notice on removing software such as stock trading chats </LI>
<Li> <SPAN class = "type"> [Image and text] </span> about organizing and learning Guo Lihua, a national model teacher, and about organizing and learning Guo Lihua, a national model teacher about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of scientific research results 1 </LI>
<Li> notice on removing stock trading chat and other software 2 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of Scientific Research Results 3 </LI>
<Li> notice on removing stock trading chat and other software 4 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of Scientific Research Results 5 </LI>
<Li> notice on removing stock trading chat and other software 6 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of scientific research achievements 7 </LI>
<Li> notice on removing stock trading chat and other software 8 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of Scientific Research Results 9 </LI>
<Li> notice on removing stock trading chat and other software 10 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of Scientific Research Results 11 </LI>
<Li> notice on removing stock trading chat and other software 12 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of scientific research achievements 13 </LI>
<Li> notice on removing stock trading chat and other software 14 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of scientific research achievements 15 </LI>
<Li> notice on removing stock trading chat and other software 16 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of scientific research achievements 17 </LI>
<Li> notice on removing stock trading chats and other software 18 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of Scientific Research Achievements 19 </LI>
<Li> notice on removing stock trading chat and other software 20 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of scientific research achievements 21 </LI>
<Li> notice on removing stock trading chat and other software 22 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of scientific research achievements 23 </LI>
<Li> notice on removing stock trading chat and other software 24 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the scientific research department on the registration of scientific research achievements 25 </LI>
<Li> notice on removing stock trading chat and other software 26 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the Scientific Research Office on the registration of scientific research achievements 27 </LI>
<Li> notice on removing stock trading chat and other software 28 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
<Li> notice of the Scientific Research Office on the registration of scientific research achievements 29 </LI>
<Li> notice on removing stock trading chat and other software 30 </LI>
<Li> about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua: about organizing and learning "national model teachers" guo Lihua </LI>
</Ul>
</Div>
<Div id = "pages"> </div>
</Div>
</Body>
</Html>
This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/coolmaples/archive/2007/06/20/1659658.aspx
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
