电脑软硬件应用网
当前位置： 电脑软硬件应用网 > 设计学院 > 网络编程 > javascript > 正文
JavaScript经典效果集锦 [2]
JavaScript经典效果集锦 [2]
2007-4-26 8:07:31　　文/佚名 　　出处:Tommy bolg 　　


十五 弹出提示的效果：

[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cao888---提示</title>
</head>

<body>
<script language=javascript>
var cao_x,cao_y;

function cao888()
{
this.display=display;
}

function display()
{
document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>CAO留言</button></td></tr></table>");
document.write("<div id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>");
document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>");
document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'>");
document.write("<tr align=center>");
document.write("<td align=left>提示:CAO888</td>");
document.write("</tr>");
document.write("</table>");
document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><img src='http://pic1.blueidea.com/bbs/topic5.gif'><br>CAO呀,错误了...<br>[确定]</span>");
document.write(" </div>");
document.write("</div>");
}
function caoMove(obj) //实现层的拖移
{
if(event.button==1)
{
var caoX=obj.clientLeft;
var caoY=obj.clientTop;
obj.style.pixelLeft=caoX+(event.x-cao_x);
obj.style.pixelTop=caoY+(event.y-cao_y);
}
}
</script>
<script language=javascript>
var mycao=new cao888();
mycao.display();
</script>
</body>
</html>
[/html]


十六 图片之间的切换：

[html]
<script language=JavaScript>
<!--
var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
var jumpUrl="http://sports.tom.com/";

imgLink[1]="http://sports.tom.com/gnzt/2005yg/";
imgLink[2]="http://sports.tom.com/zhty/";


imgUrl[1]="http://img.sports.tom.com/img/assets/200509/050927071818sportsgnzt200592701.jpg";
imgUrl[2]="http://img.sports.tom.com/img/assets/200509/050927075953zt20050926107.jpg";

var imgPre=new Array();
var j=0;
for (i=1;i<=imgUrl.length-1;i++) {
    if(imgLink[i]!="") {j++;}
    else {break;}
}
function playTran(){
    if (document.all)
        imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
    if(adNum<j)adNum++ ;
    else adNum=1;
    if( key==0 ){key=1;}
    else if (document.all){
        imgInit.filters.revealTrans.Transition=6;
        imgInit.filters.revealTrans.apply();
        playTran();
    }
    document.images.imgInit.src=imgUrl[adNum];
    jumpUrl=imgLink[adNum];
    theTimer=setTimeout("nextAd()", 7000);
}
function goUrl(){    
    jumpTarget='_blank';
    if (jumpUrl != ''){
        if (jumpTarget != '') window.open(jumpUrl,jumpTarget);
        else location.href=jumpUrl;
    }
}
//-->
</script>

<a href="javascript:goUrl()"><img style="FILTER:
revealTrans(duration=2,transition=6);border:1 solid black" src="javascript:nextAd()" width=300
border=0 name=imgInit height="210"></a>
</body>
</html>

[/html]


十七 DIV_圆边圆角的实现：

[html]
<html xmlns:v>
<head>
<style>
v\:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
</body>
[/html]


十八 跳动的菜单：


[html]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模仿as效果的导航菜单</title>
<style type="text/css">
<!--
a:link,a:visited { text-decoration: none; color: #666666 }
a:hover { text-decoration: underline }
#hor1 {
position:absolute;
left:320px;
top:20px;
width:220px;
height:20px;
z-index:1;
background-color: #999900;
}
#hor2 {
position:absolute;
left:320px;
top:40px;
width:220px;
height:20px;
z-index:2;
background-color: #FFCC00;
}
#hor3 {
position:absolute;
left:320px;
top:60px;
width:220px;
height:20px;
z-index:3;
background-color: #99CC00;
}
#board1 {
position:absolute;
left:320px;
top:40px;
width:220px;
height:120px;
z-index:-100;
background-color: #333333;
visibility: hidden;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
body {
background-color: #666666;
}
#board2 {
position:absolute;
left:320px;
top:60px;
width:220px;
height:120px;
z-index:-90;
background-color: #333333;
visibility: hidden;
}
#board3 {
position:absolute;
width:220px;
height:120px;
z-index:-80;
left: 320px;
top: 80px;
background-color: #333333;
visibility: hidden;
}
#hor4 {
position:absolute;
left:320px;
top:80px;
width:220px;
height:20px;
z-index:4;
background-color: #99CCCC;
}
#board4 {
position:absolute;
left:320px;
top:100px;
width:220px;
height:120px;
z-index:-70;
background-color: #333333;
visibility: hidden;
}

-->
</style>
<script type="text/javascript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
act=1
height=120+20
speed=0;
posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}

</script>
</head>
<body>
<div id="hor1" onclick="re(1);huke()">News</div>
<div id="hor2" onclick="re(2);huke()">Populor</div>
<div id="hor3" onclick="re(3);huke()">Sports</div>
<div id="hor4" onclick="re(4);huke()">Woman</div>
<div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足？<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div>
<div id="board4">1.二十一世纪最缺的是什么?人才<br />
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a>
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a></div>
</body>
</html>[/html]


十九 通过页面抓取照片：


[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0047)http://nnyc.vicp.net:4099/schoolstation/te.aspx -->
<HTML><HEAD><TITLE>te</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1528" name=GENERATOR>
<META content=C# name=CODE_LANGUAGE>
<META content=JavaScript name=vs_defaultClientScript>
<META content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema><LINK href="te.files/mycss.css" type=text/css
rel=stylesheet></HEAD>
<BODY background=te.files/qback1.gif><!-- MUST CALL INTEGRATORWEB METHOD _DIRECTLY_ AFTER DEFINING THE IX OBJECT -->
<FORM id=Form1 name=Form1 action=te.aspx method=post>  
<TABLE id=Table1 style="POSITION: static" borderColor=#cccccc cellSpacing=0
cellPadding=0 width=500 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD style="LINE-HEIGHT: 1.5em; HEIGHT: 35px" borderColor=#ffffff
background=te.files/titledown.gif colSpan=2><FONT face=宋体></FONT></TD></TR>
<TR>
<TD
style="PADDING-LEFT: 15px; COLOR: #660033; LINE-HEIGHT: 1.5em; PADDING-TOP: 10px"
vAlign=top borderColor=#ffffff align=left
background=te.files/bg1.gif><FONT face=宋体>友善提醒：<BR>1、如果别的程
序（如qq）或者其他网页正在使用摄像头,请先关闭相关程序，否则本</FONT><FONT
face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx，如果你未安装，请<A
href="http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD>
<TD style="HEIGHT: 222px" borderColor=#ffffff align=middle>
<OBJECT id=Form1_vd height=240 width=320
classid=CLSid:DF6D6569-5B0C-11D3-9396-008029E9B3A6 name=Form1_vd
VIEWASTEXT>
<PARAM NAME="_ExtentX" VALUE="8467">
<PARAM NAME="_ExtentY" VALUE="6350">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="CenterVideo" VALUE="-1">
<PARAM NAME="BackColor" VALUE="-2147483643">
<PARAM NAME="BorderStyle" VALUE="1">
<PARAM NAME="VideoBorder" VALUE="1">
<PARAM NAME="DriverIndex" VALUE="0">
<PARAM NAME="Preview" VALUE="-1">
<PARAM NAME="PreviewRate" VALUE="15">
<PARAM NAME="Overlay" VALUE="0">
<PARAM NAME="StretchPreview" VALUE="0">
<PARAM NAME="CancelKey" VALUE="0">
<PARAM NAME="CaptureRate" VALUE="66666">
<PARAM NAME="MakeUserConfirmCapture" VALUE="-1">
<PARAM NAME="PercentDropForError" VALUE="10">
<PARAM NAME="CaptureViaBackgroundThread" VALUE="0">
<PARAM NAME="IndexSize" VALUE="27000">
<PARAM NAME="CaptureAudio" VALUE="0">
<PARAM NAME="AbortLeftMouse" VALUE="-1">
<PARAM NAME="AbortRightMouse" VALUE="-1">
<PARAM NAME="TimeLimitEnabled" VALUE="0">
<PARAM NAME="TimeLimit" VALUE="30">
<PARAM NAME="StreamMaster" VALUE="0">
<PARAM NAME="YieldEventEnabled" VALUE="0">
<PARAM NAME="FrameEventEnabled" VALUE="0">
<PARAM NAME="VideoStreamEventEnabled" VALUE="0">
<PARAM NAME="WaveStreamEventEnabled" VALUE="0">
<PARAM NAME="UsePreciseCaptureControls" VALUE="0">
<embed src="8467" width="320" height="240" _extentx="8467" _extenty="6350" autosize="-1" centervideo="-1" backcolor="-2147483643" borderstyle="1" videoborder="1" driverindex="0" preview="-1" previewrate="15" overlay="0" stretchpreview="0" cancelkey="0" capturerate="66666" makeuserconfirmcapture="-1" percentdropforerror="10" captureviabackgroundthread="0" indexsize="27000" captureaudio="0" abortleftmouse="-1" abortrightmouse="-1" timelimitenabled="0" timelimit="30" streammaster="0" yieldeventenabled="0" frameeventenabled="0" videostreameventenabled="0" wavestreameventenabled="0" useprecisecapturecontrols="0">
</embed>
</OBJECT></TD></TR>
<TR>
<TD style="HEIGHT: 36px" align=middle background=te.files/title.gif
colSpan=2><FONT
face=宋体><INPUT onclick=catchone(); type=button value=照相></FONT></TD></TR></TBODY></TABLE></FORM>
<SCRIPT language=javascript>
function catchone()
{
Form1.Form1_vd.SaveDIB("c:\\hosngcapture.dib");
alert("图像存放在 c:\\hosngcapture.dib");
}

</SCRIPT>
</BODY></HTML>


===================================================================================


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0047)http://nnyc.vicp.net:4099/schoolstation/te.aspx -->
<HTML><HEAD><TITLE>te</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1528" name=GENERATOR>
<META content=C# name=CODE_LANGUAGE>
<META content=JavaScript name=vs_defaultClientScript>
<META content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema><LINK href="te.files/mycss.css" type=text/css
rel=stylesheet></HEAD>
<BODY background=te.files/qback1.gif><!-- MUST CALL INTEGRATORWEB METHOD _DIRECTLY_ AFTER DEFINING THE IX OBJECT -->
<FORM id=Form1 name=Form1 action=te.aspx method=post>  
<TABLE id=Table1 style="POSITION: static" borderColor=#cccccc cellSpacing=0
cellPadding=0 width=500 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD style="LINE-HEIGHT: 1.5em; HEIGHT: 35px" borderColor=#ffffff
background=te.files/titledown.gif colSpan=2><FONT face=宋体></FONT></TD></TR>
<TR>
<TD
style="PADDING-LEFT: 15px; COLOR: #660033; LINE-HEIGHT: 1.5em; PADDING-TOP: 10px"
vAlign=top borderColor=#ffffff align=left
background=te.files/bg1.gif><FONT face=宋体>友善提醒：<BR>1、如果别的程
序（如qq）或者其他网页正在使用摄像头,请先关闭相关程序，否则本</FONT><FONT
face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx，如果你未安装，请<A
href="http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD>
<TD style="HEIGHT: 222px" borderColor=#ffffff align=middle>
<OBJECT id=Form1_vd height=240 width=320
classid=CLSid:DF6D6569-5B0C-11D3-9396-008029E9B3A6 name=Form1_vd
VIEWASTEXT>
<PARAM NAME="_ExtentX" VALUE="8467">
<PARAM NAME="_ExtentY" VALUE="6350">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="CenterVideo" VALUE="-1">
<PARAM NAME="BackColor" VALUE="-2147483643">
<PARAM NAME="BorderStyle" VALUE="1">
<PARAM NAME="VideoBorder" VALUE="1">
<PARAM NAME="DriverIndex" VALUE="0">
<PARAM NAME="Preview" VALUE="-1">
<PARAM NAME="PreviewRate" VALUE="15">
<PARAM NAME="Overlay" VALUE="0">
<PARAM NAME="StretchPreview" VALUE="0">
<PARAM NAME="CancelKey" VALUE="0">
<PARAM NAME="CaptureRate" VALUE="66666">
<PARAM NAME="MakeUserConfirmCapture" VALUE="-1">
<PARAM NAME="PercentDropForError" VALUE="10">
<PARAM NAME="CaptureViaBackgroundThread" VALUE="0">
<PARAM NAME="IndexSize" VALUE="27000">
<PARAM NAME="CaptureAudio" VALUE="0">
<PARAM NAME="AbortLeftMouse" VALUE="-1">
<PARAM NAME="AbortRightMouse" VALUE="-1">
<PARAM NAME="TimeLimitEnabled" VALUE="0">
<PARAM NAME="TimeLimit" VALUE="30">
<PARAM NAME="StreamMaster" VALUE="0">
<PARAM NAME="YieldEventEnabled" VALUE="0">
<PARAM NAME="FrameEventEnabled" VALUE="0">
<PARAM NAME="VideoStreamEventEnabled" VALUE="0">
<PARAM NAME="WaveStreamEventEnabled" VALUE="0">
<PARAM NAME="UsePreciseCaptureControls" VALUE="0">
<embed src="8467" width="320" height="240" _extentx="8467" _extenty="6350" autosize="-1" centervideo="-1" backcolor="-2147483643" borderstyle="1" videoborder="1" driverindex="0" preview="-1" previewrate="15" overlay="0" stretchpreview="0" cancelkey="0" capturerate="66666" makeuserconfirmcapture="-1" percentdropforerror="10" captureviabackgroundthread="0" indexsize="27000" captureaudio="0" abortleftmouse="-1" abortrightmouse="-1" timelimitenabled="0" timelimit="30" streammaster="0" yieldeventenabled="0" frameeventenabled="0" videostreameventenabled="0" wavestreameventenabled="0" useprecisecapturecontrols="0">
</embed>
</OBJECT></TD></TR>
<TR>
<TD style="HEIGHT: 36px" align=middle background=te.files/title.gif
colSpan=2><FONT
face=宋体><INPUT onclick=catchone(); type=button value=照相></FONT></TD></TR></TBODY></TABLE></FORM>
<SCRIPT language=javascript>
function catchone()
{
Form1.Form1_vd.SaveDIB("c:\\hosngcapture.dib");
alert("图像存放在 c:\\hosngcapture.dib");
}

</SCRIPT>
</BODY></HTML>[/html]


二十 客户端静态页面玩分页：


[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
* {
    font-size:10.2pt;
    font-family:tahoma;
    line-height:150%;
}
.divContent
{
    border:1px solid red;
    background-color:#FFD2D3;
    width:500px;
    word-break:break-all;
    margin:10px 0px 10px;
    padding:10px;
}
</style>
</HEAD>

<BODY>
header
<div id="divPagenation"></div>
<div id="divContent"></div>
footer
<SCRIPT LANGUAGE="JavaScript">
<!--
s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p>";
function DHTMLpagenation(content) { with (this)
{
    // client static html file pagenation

    this.content=content;
    this.contentLength=content.length;
    this.pageSizeCount;
    this.perpageLength=100; //default perpage byte length.
    this.currentPage=1;
    //this.regularExp=/.+[\?\&]{1}page=(\d+)/;
    this.regularExp=/\d+/;

    this.divDisplayContent;
    this.contentStyle=null;
    this.strDisplayContent="";
    this.divDisplayPagenation;
    this.strDisplayPagenation="";
    
    arguments.length==2?perpageLength=arguments[1]:'';

    try {
        divExecuteTime=document.createElement("DIV");
        document.body.appendChild(divExecuteTime);
    }
    catch(e)
    {
    }
    if(document.getElementById("divContent"))
    {
        divDisplayContent=document.getElementById("divContent");
    }
    else
    {
        try
        {
            divDisplayContent=document.createElement("DIV");
            divDisplayContent.id="divContent";
            document.body.appendChild(divDisplayContent);
        }
        catch(e)
        {
            return false;
        }
    }

    if(document.getElementById("divPagenation"))
    {
        divDisplayPagenation=document.getElementById("divPagenation");
    }
    else
    {
        try
        {
            divDisplayPagenation=document.createElement("DIV");
            divDisplayPagenation.id="divPagenation";
            document.body.appendChild(divDisplayPagenation);
        }
        catch(e)
        {
            return false;
        }
    }

    DHTMLpagenation.initialize();
    return this;
    
}};
DHTMLpagenation.initialize=function() { with (this)
{
    divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";
    if(contentLength<=perpageLength)
    {
        strDisplayContent=content;
        divDisplayContent.innerHTML=strDisplayContent;
        return null;
    }

    pageSizeCount=Math.ceil((contentLength/perpageLength));

    DHTMLpagenation.goto(currentPage);
    DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayPage=function() { with (this)
{
    strDisplayPagenation="分页：";

    if(currentPage&¤tPage!=1)
        strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>  ';
    else
        strDisplayPagenation+="上一页  ";

    for(var i=1;i<=pageSizeCount;i++)
    {
        if(i!=currentPage)
            strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>  ';
        else
            strDisplayPagenation+=i+"  ";
    }

    if(currentPage&¤tPage!=pageSizeCount)
        strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>  ';
    else
        strDisplayPagenation+="下一页  ";

    strDisplayPagenation+="共 " + pageSizeCount + " 页，每页" + perpageLength + " 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";

    divDisplayPagenation.innerHTML=strDisplayPagenation;
}};
DHTMLpagenation.previous=function() { with(this)
{
    DHTMLpagenation.goto(currentPage-1);
}};
DHTMLpagenation.next=function() { with(this)
{
    DHTMLpagenation.goto(currentPage+1);
}};
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
    startime=new Date();
    if(regularExp.test(iCurrentPage))
    {
        currentPage=iCurrentPage;
        strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
    }
    else
    {
        alert("page parameter error!");
    }
    DHTMLpagenation.displayPage();
    DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
    divDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
    if(regularExp.test(iPerpageLength))
    {
        DHTMLpagenation.perpageLength=iPerpageLength;
        DHTMLpagenation.currentPage=1;
        DHTMLpagenation.initialize();
    }
    else
    {
        alert("请输入数字");
    }
}};

// method
// DHTMLpagenation(strContent,perpageLength)

DHTMLpagenation(s,100);

//-->
</SCRIPT>
</BODY>
</HTML>[/html]

上一页  [1] [2] 
  • 上一篇文章：

  • 下一篇文章：
    • 最新热点 最新推荐 相关文章
    JavaScript经典效果集锦 [3]
    JavaScript经典效果集锦 [1]
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号