我是在相片排序中有需要用到未经过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和jQuery来实现公告栏内容的自动滚动效果。 首先，我们需要理解公告栏滚动效果的基本原理。在给定文件示例中，公告栏的滚动效果是通过动态修改HTML元素CSS属性（如`marginTop`）来...
根据提供的文件信息，我们可以深入探讨该JavaScript无缝上下滚动加定高停顿效果的实现机制及其应用场景。接下来将详细解析此代码的关键部分，并提取出相关的知识点。 ### 一、概述 本段代码展示了一个利用...
javascript 实现的进度条效果 javascript 实现的进度条效果
javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...
本文将详细介绍如何用JavaScript实现上下滚动的跑马灯效果。 首先，我们需要理解跑马灯效果的基本原理：它通常是通过改变元素的位置或透明度，模拟出内容持续移动的视觉效果。对于上下滚动的跑马灯，我们需要控制...
我们交换数组可以实现元素上下移动了，这个效果我们在表格或以前排序算法中都会用到，下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候，要实现一个数组记录上下移动的示例。写起来也没有没...
在本项目中，"JavaScript实现的3D球面标签云效果"是一个利用JavaScript创建的动态视觉效果，它将关键词或文字以3D形式展示在球面上，为用户带来新颖且互动的体验。 实现这个效果的关键技术主要包括以下几个方面： ...
在这个项目中，我们探讨的是如何用JavaScript来实现一个页面下雪的效果，并且允许通过代码修改使雪花颜色从白色转变为彩色。 首先，我们需要理解JavaScript的基础知识。JavaScript是一种脚本语言，主要用于客户端的...
本文将详细探讨如何使用JavaScript实现多图片切换效果，适用于新闻图片展示或网站焦点区域。 首先，JavaScript是一种强大的客户端脚本语言，常用于网页动态交互。在实现图片切换效果时，我们通常会利用JavaScript的...
"CSS+JavaScript 实现扇形导航动画效果"是一个巧妙地将这两种技术结合的示例，旨在为用户创造一个独特且引人入胜的导航体验。这个项目通过CSS来布局和设计扇形导航的静态部分，然后利用JavaScript实现动画效果，使...
这里介绍使用JavaScript实现上下浮动的窗口，在垂直方向上漂浮，代码内的JS函数有超丰富的浮动层定义功能，像浮动层位置高度、初始化事件触发器、设定浮动层为可见，用style.left设定浮动层左边距、浮动层的运动速度...
在网页设计中，提供良好的用户体验是至关重要的，其中一种方式就是通过实现放大镜效果来增强商品图片的查看体验。本文将详细介绍如何使用JavaScript和HTML5技术来创建三种不同的放大镜效果：圆形放大镜、直接矩形...
5. **动画效果**：可以使用 CSS3 的 `transition` 或 `animation` 属性，或者通过 JavaScript 自定义动画函数，实现图片平滑地移动和淡入淡出效果。 6. **数组和索引管理**：在JavaScript中，通常会用数组存储图片...
在本案例中，我们将探讨如何利用JavaScript实现一个具有吸引力的相册翻转效果，以增强网站的视觉表现力和用户体验。 首先，让我们了解JavaScript相册的基本构建块。一个基本的相册系统通常包括以下组件： 1. 图片...
使用JavaScript增强交互效果 使用JavaScript实现表单验证 使用JavaScript制作网页广告特效 使用JavaSctipt制作弹出窗口特效 使用JavaScript实现时钟特效 使用JavaScript实现级联显示功能 使用JavaScript+CSS...
基于给定文件内容，以下是关于javascript实现上下无缝滚动效果的知识点： 1. 无缝滚动效果的概念 无缝滚动是指在网页中实现的一种滚动效果，内容列表在到达一定位置后可以连续无间断地循环滚动。这种效果常用于网站...
这个实现是基于JavaScript，一种广泛用于构建交互式Web页面的脚本语言。虽然这个实现不包括自动搜索歌词的功能，但它依然展示了JavaScript在处理动态内容和实时更新方面的强大能力。 首先，JavaScript的核心在于DOM...
本示例中的"jQuery两行列表滚动效果"是一种常见的网页动态展示技术，常用于产品展示、新闻滚动或者广告轮播等场景。下面将详细介绍这个效果的实现原理和相关知识点。 首先，jQuery的动画功能是通过`.animate()`函数...
在本项目中，“javascript特效实现刮刮卡特效代码下载”是一个利用JavaScript技术实现的刮刮卡互动效果，常见于各种促销活动或游戏场景。这种特效可以增加用户的参与度和互动性，为网站增添趣味性。 刮刮卡特效的...
本主题将探讨如何使用jQuery和纯JavaScript实现客户端验证，包括图片轮换、Tab切换、图片上下滚动以及表单验证。 首先，jQuery是一个轻量级的JavaScript库，它使得JavaScript的使用更加简洁和高效。在图片轮换功能...