我是在相片排序中有需要用到未经过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源文件的方法!嗯哼!也算是自己的劳动成果吧,在此记录下来!也希望能给其它人也带来一点点的帮助吧!
分享到:
相关推荐
javascript实现开门效果
主要为大家详细介绍了JavaScript实现公告栏上下滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要为大家详细介绍了JavaScript实现tab栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
javascript 实现的进度条效果 javascript 实现的进度条效果
这是一个JavaScript 无缝上下滚动加定高停顿效果 对于在写代码的时候,会有一定的用处的,希望有帮到大家
javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...
javascript实现鼠标拖动div的效果。。。
使用JavaScript实现的跑马灯效果。跑马灯图片使用自动添加img标签实现,可以添加10张图片,只需修改图片数组的内容,在数组中添加相应图片名称即可。
javascript 实现图片轮转效果,效果页面可查看当当品牌店铺
web前端开发们需要很那些效果打交道,早上事情不多,分享一个javascript实现的绚丽图片展示效果,很适合在产品页面中出现. 这个效果主要和mootools结合一起使用的.
我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没...
JavaScript实现简单的轮播图效果 轮播图:在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。这些图片就都是轮播图,这个模块就叫做轮播模块。 如何实现轮播图 如何才能在js里面...
javascript效果javascript效果javascript效果javascript效果
这是一个完全用JavaScript实现的图片切割效果实例,可以设置全透明、换图片、设置图片大小等。
这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度、初始化事件触发器、设定浮动层为可见,用style.left设定浮动层左边距、浮动层的运动速度...
javascript网页中实现选项卡效果特效
JavaScript实现页面动态验证码
使用javascript实现的烟花燃放效果,搜集网络资源,进行注释、修改,可以设置烟花的大小,颜色,上升速度,散开速度等各项参数。
使用JavaScript增强交互效果 使用JavaScript实现表单验证 使用JavaScript制作网页广告特效 使用JavaSctipt制作弹出窗口特效 使用JavaScript实现时钟特效 使用JavaScript实现级联显示功能 使用JavaScript+CSS...
主要为大家详细介绍了基于javascript实现动态时钟效果的相关资料,动态显示系统当前时间,具有一定的参考价值,感兴趣的小伙伴们可以参考一下