`
czhsuccess
  • 浏览: 41380 次
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
js实现两行换位 用javascript实现上下两行换位效果 
<!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>
js实现两行换位 用javascript实现上下两行换位效果 
//整个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;
	
}
Global site tag (gtag.js) - Google Analytics