我是在相片排序中有需要用到未经过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和HTML5技术来创建三种不同的放大镜效果：圆形放大镜、直接矩形...
在本案例中，我们将探讨如何利用JavaScript实现一个具有吸引力的相册翻转效果，以增强网站的视觉表现力和用户体验。 首先，让我们了解JavaScript相册的基本构建块。一个基本的相册系统通常包括以下组件： 1. 图片...
基于给定文件内容，以下是关于javascript实现上下无缝滚动效果的知识点： 1. 无缝滚动效果的概念 无缝滚动是指在网页中实现的一种滚动效果，内容列表在到达一定位置后可以连续无间断地循环滚动。这种效果常用于网站...
### 使用JavaScript实现Marquee效果详解 #### 一、引言 在网页设计中，Marquee是一种常见的滚动文本或图像效果，常用于展示新闻头条、广告等动态内容。传统的Marquee效果可以通过HTML `<marquee>` 标签实现，但...
这个实现是基于JavaScript，一种广泛用于构建交互式Web页面的脚本语言。虽然这个实现不包括自动搜索歌词的功能，但它依然展示了JavaScript在处理动态内容和实时更新方面的强大能力。 首先，JavaScript的核心在于DOM...
本示例中的"jQuery两行列表滚动效果"是一种常见的网页动态展示技术，常用于产品展示、新闻滚动或者广告轮播等场景。下面将详细介绍这个效果的实现原理和相关知识点。 首先，jQuery的动画功能是通过`.animate()`函数...
本主题将探讨如何使用jQuery和纯JavaScript实现客户端验证，包括图片轮换、Tab切换、图片上下滚动以及表单验证。 首先，jQuery是一个轻量级的JavaScript库，它使得JavaScript的使用更加简洁和高效。在图片轮换功能...
本文主要探讨了如何使用JavaScript实现具有缓冲运动效果的轮播图，并对实现过程中的相关知识点进行了详细阐述。 首先，JavaScript中的缓冲运动函数是实现平滑动画的关键。缓冲运动允许对象在开始和结束时速度较慢，...
最新javascript实现手风琴导航效果源码下载
用javascript实现购物车特效
JavaScript 实现网页动态效果 ...以上两个实例只是 JavaScript 实现网页动态效果的一部分，JavaScript 的功能非常强大，想要实现更多的动态效果，只需要按照自己的需求编写相应的 JavaScript 代码。
根据给定的信息，“JavaScript经典效果集锦”这篇文章主要介绍了多种使用JavaScript实现的网页特效与功能。下面将对文章中提及的一些经典效果进行详细介绍。 ### 1. 实现小技巧 文章开头提到了几个简单的...
在本文中，我们将深入探讨如何使用JavaScript实现各种网页特效，以提升用户体验并使网站更具吸引力。 1. **页面加载动画** 当用户访问网页时，加载动画可以提供视觉反馈，表明页面正在加载。JavaScript可以通过...
基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip...
JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播...