我是在相片排序中有需要用到未经过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 实现的进度条效果
实现图片渐隐的效果使用JavaScript JavaScript是一种强大的客户端脚本语言，能够实现网页中的各种交互效果。今天，我们将介绍如何使用JavaScript实现图片渐隐的效果。 首先，让我们了解什么是图片渐隐的效果。图片...
javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...
本文将详细介绍如何用JavaScript实现上下滚动的跑马灯效果。 首先，我们需要理解跑马灯效果的基本原理：它通常是通过改变元素的位置或透明度，模拟出内容持续移动的视觉效果。对于上下滚动的跑马灯，我们需要控制...
本文将深入探讨如何使用JavaScript实现这一效果。 首先，我们需要理解JavaScript的基本语法和DOM操作。JavaScript是一种广泛应用于网页交互的脚本语言，它可以直接在浏览器中执行，改变HTML元素的状态或样式。DOM...
在本项目中，"JavaScript实现的3D球面标签云效果"是一个利用JavaScript创建的动态视觉效果，它将关键词或文字以3D形式展示在球面上，为用户带来新颖且互动的体验。 实现这个效果的关键技术主要包括以下几个方面： ...
本文将详细探讨如何使用JavaScript实现多图片切换效果，适用于新闻图片展示或网站焦点区域。 首先，JavaScript是一种强大的客户端脚本语言，常用于网页动态交互。在实现图片切换效果时，我们通常会利用JavaScript的...
"CSS+JavaScript 实现扇形导航动画效果"是一个巧妙地将这两种技术结合的示例，旨在为用户创造一个独特且引人入胜的导航体验。这个项目通过CSS来布局和设计扇形导航的静态部分，然后利用JavaScript实现动画效果，使...
这里介绍使用JavaScript实现上下浮动的窗口，在垂直方向上漂浮，代码内的JS函数有超丰富的浮动层定义功能，像浮动层位置高度、初始化事件触发器、设定浮动层为可见，用style.left设定浮动层左边距、浮动层的运动速度...
在网页设计中，提供良好的用户体验是至关重要的，其中一种方式就是通过实现放大镜效果来增强商品图片的查看体验。本文将详细介绍如何使用JavaScript和HTML5技术来创建三种不同的放大镜效果：圆形放大镜、直接矩形...
5. **动画效果**：可以使用 CSS3 的 `transition` 或 `animation` 属性，或者通过 JavaScript 自定义动画函数，实现图片平滑地移动和淡入淡出效果。 6. **数组和索引管理**：在JavaScript中，通常会用数组存储图片...
基于给定文件内容，以下是关于javascript实现上下无缝滚动效果的知识点： 1. 无缝滚动效果的概念 无缝滚动是指在网页中实现的一种滚动效果，内容列表在到达一定位置后可以连续无间断地循环滚动。这种效果常用于网站...
### 使用JavaScript实现Marquee效果详解 #### 一、引言 在网页设计中，Marquee是一种常见的滚动文本或图像效果，常用于展示新闻头条、广告等动态内容。传统的Marquee效果可以通过HTML `<marquee>` 标签实现，但...
内容概要：本文详细介绍了使用HTML、CSS和JavaScript实现动态3D圣诞树效果的方法。通过具体的代码示例，展示了如何构建圣诞树的各个部分（树干、树枝、装饰物）并为其添加旋转动画和动态效果。 适合人群：前端开发...
本示例中的"jQuery两行列表滚动效果"是一种常见的网页动态展示技术，常用于产品展示、新闻滚动或者广告轮播等场景。下面将详细介绍这个效果的实现原理和相关知识点。 首先，jQuery的动画功能是通过`.animate()`函数...
本主题将探讨如何使用jQuery和纯JavaScript实现客户端验证，包括图片轮换、Tab切换、图片上下滚动以及表单验证。 首先，jQuery是一个轻量级的JavaScript库，它使得JavaScript的使用更加简洁和高效。在图片轮换功能...
本文主要探讨了如何使用JavaScript实现具有缓冲运动效果的轮播图，并对实现过程中的相关知识点进行了详细阐述。 首先，JavaScript中的缓冲运动函数是实现平滑动画的关键。缓冲运动允许对象在开始和结束时速度较慢，...
内容概要：本文详细介绍了如何使用HTML、CSS和JavaScript实现一个圣诞节日主题的飘雪花效果。主要内容包括创建HTML结构文件、设置CSS样式文件和编写JavaScript脚本来生成动态雪花，并将其添加到页面中。 适合人群：...
最新javascript实现手风琴导航效果源码下载