【JavaScript】使用JS实现DIV的互…

<!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=utf-8" />

<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript">

var now_page = 1;//当前页

var total    = "";//总条数

var page     = 5;//每页显示条数


function gettotal(r)

{

total = r;

}


function print_content()

{

var page_control = document.getElementByIdx_x_x("page_control");

var page_first   = document.getElementByIdx_x_x("page_first");

var page_prev    = document.getElementByIdx_x_x("page_prev");

var page_pages   = document.getElementByIdx_x_x("page_pages");

var page_next    = document.getElementByIdx_x_x("page_next");

var page_last    = document.getElementByIdx_x_x("page_last");

//先将所有的层隐藏

for (i=1;i<=total;i++)

{

$('#content_'+i).css('display','none');

}

//如果总记录数小于分页记录数,则显示全部记录

if (total <page)

{

for (i=1;i<=total;i++)

{

$('#content_'+i).css('display','block');//显示全部记录

page_control.innerHTML = 1;//设置分页样式为1

}


page_first.style.display='inline';

page_prev.style.display='inline';

page_next.style.display='inline';

page_last.style.display='inline';

}

else//否则显示对应的分页记录

{

content = now_page*page;

for (i=content;i>(content-page);i--)

{

$('#content_'+i).css('display','block');//显示对应的分页记录

}


//首页

if (now_page > 1)

{

page_first.style.display='inline';

}

else

{

page_first.style.display='none';

}


//上一页

if(now_page != 1)

{

page_prev.style.display='inline';

}

else

{

page_prev.style.display='none';

}


//指定页码

if(Math.ceil(total/page) < (now_page+2))

{

last_page = Math.ceil(total/page);

}

else

{

last_page = (now_page+2);

}


if(2 < now_page)

{

prev_page = (now_page-2);

}

else

{

prev_page = 1;

}

var pages_content = "";


for (i=prev_page;i<now_page;i++)

{

pages_content = pages_content+' <span style="cursor:pointer;font-size:20px;text-decoration:underline;" οnclick="pages_pages('+i+')">'+i+'</span> ';  

}

for (i=now_page;i<=last_page;i++)

{

var page_content="";

if (i==now_page)

{

page_content = ' <span style="cursor:pointer;font-size:20px;" οnclick="">'+i+'</span> ';

}

else

{

page_content = ' <span style="cursor:pointer;font-size:20px;text-decoration:underline;" οnclick="pages_pages('+i+')">'+i+'</span> ';

}

pages_content = pages_content+page_content;

}

page_pages.innerHTML = pages_content;



//下一页

if(now_page < Math.ceil(total/page))

{

page_next.style.display='inline';

}

else

{

page_next.style.display='none';

}


//末页

if(now_page != Math.ceil(total/page))

{

page_last.style.display='inline';

}

else

{

page_last.style.display='none';

}

}

}


//首页

function pages_first()

{

now_page = 1;

print_content();

}


//上一页

function pages_prev()

{

now_page = (--now_page);

print_content();

}


//指定页码

function pages_pages(r)

{

now_page = r;

print_content();

}


//下一页

function pages_next()

{

now_page = (++now_page);

print_content();

}


//末页

function pages_last()

{

now_page = Math.ceil(total/page);

print_content();

}


//下降

function down(id,total)

{

var down_out = document.getElementByIdx_x_x("out_"+(id+1));//取得下层外层的对象


var up_out = document.getElementByIdx_x_x("out_"+id);//取得上层外层的对象


    var down_order = document.getElementByIdx_x_x("order_"+(id+1));//取得下层隐藏域的对象


    var up_order = document.getElementByIdx_x_x("order_"+id);//取得上层隐藏域的对象

    

    var up_in = document.getElementByIdx_x_x("in_"+up_order.value);//取得上层的里层对象


    var down_in = document.getElementByIdx_x_x("in_"+down_order.value);//取得下层的里层对象


    up_out.a(down_in);//将下层的里层放进上层的外层

    

    down_out.a(up_in);//将上层的里层放进下层的外层   


    var cache_order = up_order.value;//传递隐藏域的值 

    

    up_order.value = down_order.value;//对换隐藏域的值

    

    down_order.value = cache_order;//对换隐藏域的值

}


//上升

function up(id,total)

{

var down_out = document.getElementByIdx_x_x("out_"+id);//取得下层外层的对象


var up_out = document.getElementByIdx_x_x("out_"+(id-1));//取得上层外层的对象


    var down_order = document.getElementByIdx_x_x("order_"+id);//取得下层隐藏域的对象


    var up_order = document.getElementByIdx_x_x("order_"+(id-1));//取得上层隐藏域的对象

    

    var up_in = document.getElementByIdx_x_x("in_"+up_order.value);//取得上层的里层对象


    var down_in = document.getElementByIdx_x_x("in_"+down_order.value);//取得下层的里层对象


    up_out.a(down_in);//将下层的里层放进上层的外层

    

    down_out.a(up_in);//将上层的里层放进下层的外层   


    var cache_order = up_order.value;//传递隐藏域的值 

    

    up_order.value = down_order.value;//对换隐藏域的值

    

    down_order.value = cache_order;//对换隐藏域的值

}



</script>

</head> 

<body οnlοad="gettotal(30);print_content()">

<center>

<?php for ($i=1;$i<=30;$i++):?>

<div style="display:inline;" id="content_<?=$i?>">

<input id="order_<?=$i?>" type="hidden" value="<?=$i?>"/>

<span id="out_<?=$i?>">

<span  id="in_<?=$i?>">

<?='内容_'.$i?>

</span>

</span>

<?php if ($i!==1):?>

<span οnclick="up(<?=$i?>,30)" id="up_<?=$i;?>" style="cursor:pointer;font-size:20px;text-decoration:underline;">up</span>

<?php else: ?>

<span οnclick="" id="up_<?=$i;?>" style="font-size:20px;">up</span>

<?php endif;?>

<?php if ($i!==30):?>

<span οnclick="down(<?=$i?>,30)" id="down_<?=$i;?>" style="cursor:pointer;font-size:20px;text-decoration:underline;">down</span>

<?php else: ?>

<span οnclick="" id="down_<?=$i;?>" style="font-size:20px;">down</span>

<?php endif;?>

</div>

<?php endfor;?>


<span id="page_control">

<span id="page_first" style="cursor:pointer;font-size:20px;text-decoration:underline;display:none" οnclick="pages_first()">首页</span>

<span id="page_prev" style="cursor:pointer;font-size:20px;text-decoration:underline;display:none" οnclick="pages_prev()">上一页</span>

<span id="page_pages" ></span>

<span id="page_next" style="cursor:pointer;font-size:20px;text-decoration:underline;display:none" οnclick="pages_next()">下一页</span>

<span id="page_last" style="cursor:pointer;font-size:20px;text-decoration:underline;display:none" οnclick="pages_last()">末页</span>

</span>


</center>

</body> 

</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值