用javascript实现下上两行换位效果
日期：2014-05-16 浏览次数：20400 次
用javascript实现上下两行换位效果
??我是在相片排序中有需要用到未经过DB就实现相片上移，下移，为了让用户体验(其实质效果就如这个javaEye blog中的分类管理的上移下移一样，不过这里是每次都有经过DB了！！)，所以才想着用javascript去实现它的页面效果，而最后才真正通过一个button将排序结果存入DB，重新loading page。
?
//整个div里面的内容上移
function upHtml(val)
{
//这里val是传过来的一个int型值
var replace_index = val - 1;
var div_html = document.getElementById('div'+val).innerHTML;
var replace_div_html = document.getElementById('div'+replace_index).innerHTML;
//change the two innerHTML
var save_div = replace_div_html;
document.getElementById('div'+replace_index).innerHTML = div_html;
document.getElementById('div'+val).innerHTML = save_div;
}
//整个div里面的内容下移
function downHtml(val)
{
//这里val是传过来的一个int型值
var replace_index = val + 1;
var div_html = document.getElementById('div'+val).innerHTML;
var replace_div_html = document.getElementById('div'+replace_index).innerHTML;
//change the two innerHTML
var save_div = replace_div_html;
document.getElementById('div'+replace_index).innerHTML = div_html;
document.getElementById('div'+val).innerHTML = save_div;
}
?从这js可以看出，以上上移和下移的效果实际上我是通过更换它们的html源文件来实现滴！下面请看下对应上面js的简单的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="">
</HEAD>
<BODY>
<div id="div1">
<IMG width="90" height="80" src="http://t2.baidu.com/it/u=1064298196,2068260633&fm=0&gp=16.jpg" border=0>
<a href="#" onclick="downHtml(1);">down </a>
</div>
<div id="div2">
<IMG width="90" height="80" src="http://t2.baidu.com/it/u=1064298196,2068260633&fm=0&gp=16.jpg" border=0>
<a href="#" onclick="upHtml(2);">up </a>
??
<a href="#" onclick="downHtml(2);">down </a>
</div>
<div id="div3">
<IMG width="90" height="80" src="http://t2.baidu.com/it/u=1064298196,2068260633&fm=0&gp=16.jpg" border=0>
<a href="#" onclick="upHtml(3);">up </a>
</div>
</BODY>
</HTML>
? 由于需求是对所有的相片排序时，对每个相片的上移和下移开始时不重新loading页面，而又要示让用户看到效果，当所有的相片排序ok之后，才通过action将排序结果更新到DB，重新loadin。哎！可是花费了我好多时间才想到替换html源文件的方法！嗯哼！也算是自己的劳动成果吧，在此记录下来！也希望能给其它人也带来一点点的帮助吧！
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
