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

本文链接：https://blog.csdn.net/ijusttale/article/details/38683373

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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>

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

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

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

</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>

</center>

</body>

</html>