首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 几个div位置切换，如何来实现？谢谢

几个div位置切换，如何来实现？谢谢

时间：2009-08-16

来源：互联网

请问大家，如何利用jquery来实现这样一个功能（如附件所示：）

当点击上移或者下移的时候，整个板块随之而动。而且是同时动~~

由于项目里面需要这样的功能，希望大家给些帮助。

具体效果：我是在csdn上面截图过来的

http://daohang.csdn.net/ 效果在这里。麻烦大家帮忙看下~~~谢谢

图片:
'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" title="Click Here To EnLarge">
谢谢大家的帮忙了~~~~~

作者: haibin666   发布时间: 2009-08-16

还不如用这个

http://jqueryui.com/demos/sortable/

作者: haibin666   发布时间: 2009-08-16

谢谢朋友，我知道jq有这个，但是我要实现上面所说的那样~~~

谢谢

作者: keakon   发布时间: 2009-08-16



怎么就没人来帮下呢？ 浏览了这么多次了~~~~~~

谢谢大家的帮忙啊~~~

我觉得问题可能是 定位。 position的属性有点关系~~~

作者: haibin666   发布时间: 2009-08-16

给你个思路吧

左右分成2个div，每个div里是3个div块，position: absolute;

移动时用animate配合top和opacity参数来实现

不同的元素可以用queue: false来实现并行动画效果的

作者: haibin666   发布时间: 2009-08-16

网上好多例子，不过我觉好复杂的。

作者: keakon   发布时间: 2009-08-17

这个哪见过，忘了~~~~~

作者: coolhty   发布时间: 2009-08-17

引用
引用第6楼coolhty于2009-08-17 15:36发表的  :
网上好多例子，不过我觉好复杂的。


哪里哪里？

嘿嘿 还在解决中………………

作者: 坏小子andi   发布时间: 2009-08-17

刚还是接触，只能来学习了！

作者: haibin666   发布时间: 2009-08-18



好的 嘿嘿

可以去俺的破空间 嘎嘎

作者: 芙蓉飘雪   发布时间: 2009-08-18

我重那个网站把页面DOWN了下来。我把那页面中DIV和JS取出来，你们谁来帮我分析啊。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0024)http://daohang.csdn.net/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>技术导航</title>
<meta content="IE=7.0000" http-equiv="X-UA-Compatible">
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible">
<style type="text/css">
A:link
{
color: #000;
text-decoration: none;
}
A:hover
{
text-decoration: underline;
}
A:visited
{
text-decoration: none;
}
A:active
{
text-decoration: underline;
}
BODY
{
text-align: center;
margin-top: 0px;
font: 12px arial,simsun;
}
UL
{
list-style-type: none;
}
UL LI
{
list-style-type: none;
}
.w
{
background-color: white;
overflow: hidden;
}
.l
{
float: left;
}
.r
{
float: right;
}
.c
{
clear: both;
}
.t
{
width: 4px;
height: 1px;
}
.o
{
width: 2px;
height: 1px;
}
.p
{
width: 1px;
height: 2px;
}
/* .d
{
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
} */
#main
{
width: 976px;
margin-left: auto;
margin-right: auto;
}
.a7container
{
position: relative;
width: 385px;
float: left;
}
.a2
{
position: relative;
width: 385px;
float: left;
height: 920px;
}
.b2
{
text-align: left;
line-height: 20px;
width: 100px;
margin-bottom: 1px;
float: left;
margin-left: 4px !important;
}
.b1
{
font-size: 14px;
font-weight: bold;
}
.b3
{
text-align: left;
line-height: 24px;
width: 381px;
float: left;
margin-left: 2px !important;
font-weight: bold;
}
.b4
{
text-align: left;
width: 381px;
background: #fff;
float: left;
margin-left: 2px !important;
}
.b4 DIV
{
margin-left: 5px;
}
.b4 UL
{
display: inline;
}
.b4 LI
{
text-align: left;
line-height: 24px;
width: 33.2%;
float: left;
}
.b5
{
text-align: left;
line-height: 24px;
width: 381px;
float: left;
margin-left: 2px !important;
}
.b5 DIV
{
color: #666;
margin-left: 5px;
}
.b5 A
{
margin-left: 2px !important;
}
.b6
{
text-align: right;
line-height: 24px;
width: 381px;
background: #fff;
float: left;
margin-left: 2px !important;
}
.b7
{
text-align: right;
margin-top: 3px;
width: 80px;
font-family: simsun;
float: left;
margin-left: 195px !important;
}
#rc4
{
position: absolute;
width: 100%;
background: #b3d580;
top: 0px;
left: 0px;
}
#rc4 A:hover
{
text-decoration: underline;
}
#rc4 .b2 A
{
color: #2b8100;
}
#rc4 .b3
{
font-family: simsun,arial;
background: #ecf4df;
color: #690;
}
#rc4 .b5
{
background: #ecf4df;
}
#rc4 .b5 A
{
color: #690;
}
#rc4 .b6 A
{
color: #690;
}
#rc4 .b7
{
color: #2b8100;
}
#rc6
{
position: absolute;
width: 100%;
background: #99c9b1;
top: 308px;
left: 0px;
}
#rc6 A:hover
{
text-decoration: underline;
}
#rc6 .b2 A
{
color: #366;
}
#rc6 .b3
{
font-family: simsun,arial;
background: #e9f4ed;
color: #428080;
}
#rc6 .b5
{
background: #e9f4ed;
}
#rc6 .b5 A
{
color: #428080;
}
#rc6 .b6 A
{
color: #428080;
}
#rc6 .b7
{
color: #366;
}
#rc8
{
position: absolute;
width: 100%;
background: #b4a1d8;
top: 616px;
left: 0px;
}
#rc8 A:hover
{
text-decoration: underline;
}
#rc8 .b2 A
{
color: #644764;
}
#rc8 .b3
{
font-family: simsun,arial;
background: #eeecf6;
color: #856885;
}
#rc8 .b5
{
background: #eeecf6;
}
#rc8 .b5 A
{
color: #856885;
}
#rc8 .b6 A
{
color: #856885;
}
#rc8 .b7
{
color: #644764;
}
#rc5
{
position: absolute;
width: 100%;
background: #f7c480;
top: 0px;
left: 0px;
}
#rc5 A:hover
{
text-decoration: underline;
}
#rc5 .b2 A
{
color: #c60;
}
#rc5 .b3
{
font-family: simsun,arial;
background: #f9f4e5;
color: #c60;
}
#rc5 .b5
{
background: #f9f4e5;
}
#rc5 .b5 A
{
color: #c60;
}
#rc5 .b6 A
{
color: #c60;
}
#rc5 .b7
{
color: #c60;
}
#rc7
{
position: absolute;
width: 100%;
background: #d5d588;
top: 308px;
left: 0px;
}
#rc7 A:hover
{
text-decoration: underline;
}
#rc7 .b2 A
{
color: #88880e;
}
#rc7 .b3
{
font-family: simsun,arial;
background: #f2f2db;
color: #88880e;
}
#rc7 .b5
{
background: #f2f2db;
}
#rc7 .b5 A
{
color: #88880e;
}
#rc7 .b6 A
{
color: #88880e;
}
#rc7 .b7
{
color: #88880e;
}
#rc9
{
position: absolute;
width: 100%;
background: #eea2bb;
top: 616px;
left: 0px;
}
#rc9 A:hover
{
text-decoration: underline;
}
#rc9 .b2 A
{
color: #9b566d;
}
#rc9 .b3
{
font-family: simsun,arial;
background: #fceef3;
color: #9b566d;
}
#rc9 .b5
{
background: #fceef3;
}
#rc9 .b5 A
{
color: #9b566d;
}
#rc9 .b6 A
{
color: #9b566d;
}
#rc9 .b7
{
color: #9b566d;
}
</style>

</head>
<body>
<div>
<div id="main">

<div id="rd2">
<span style="visibility: hidden" id="sd_up">上移</span>
<span style="visibility: hidden" id="sd_down">下移</span>
</div>
<div>
<div style="margin-left: 190px">

<div style="margin-right: 0px !important" class="a2">
<div id="rc4">
<div class="b2">
 <a id="cat:-1:8" class="b1" href="http:///##" target="_blank">Web Apps»</a>
</div>
<div id="bt4" class="b7">
</div>
<div class="b3">
 [中间件]</div>
<div class="b4">
<div>
<ul>
<li> <a id="AFrqEzcbSLa99a1be1niGBVwkz9ttffudQ:sit:12:8" href="http://dev2dev.bea.com/wlplatform/"
target="_blank">Weblogic</a> </li>
<li> <a id="AFrqEzcUEGUNNRYgf65wkNAXAJpSaZwc3Q:sit:13:8" href="http://www.ibm.com/websphere"
target="_blank">WebSphere</a> </li>
</ul>
</div>
</div>
<div class="b5">
<div>
 相关搜索： <span>
<a href="http://www.google.cn/search?hl=zh-CN&source=shallowdir&q=%E5%8A%A0%E5%8B%92%E6%AF%94%E6%B5%B7%E7%9B%97"
target="_blank">
LAMP
</a>
</div>
</div>
<div class="b6">
<a id="mor:-1:8" href="http://daohang.csdn.net/" target="_blank">更多网站»</a> 
</div>


<div class="w t r">
</div>
</div>
<div id="rc6">

<div class="b2">
 <a id="cat:-1:10" class="b1" href="http://daohang.csdn.net/###" target="_blank">Development»</a></div>
<div id="bt6" class="b7">
</div>
<div class="b3">
 [热门工具]</div>
<div class="b4">
<div>
<ul>
<li> <a id="AFrqEzd7Wblh9MrNYIOImXzNcAxaz2-m-g:sit:0:10" href="http://www.google.com/search?hl=en&rlz=1B3GGGL_enCN238CN238&q=ajax&btnG=Search"
target="_blank">Ajax</a> </li>
<li> <a id="AFrqEzf13Cdu8uXeDs8U0BqHNgNTCWwyfA:sit:1:10" href="http://www.python.org/"
target="_blank">Python</a> </li>
</ul>
</div>
</div>
<div class="b5">
<div>
 相关搜索： <span><a href="http://www.google.com/search?hl=en&rlz=1B3GGGL_enCN238CN238&q=%E6%9E%B6%E6%9E%84&btnG=Search"
target="_blank">架构</a>
</div>
</div>
<div class="b6">
<a id="mor:-1:10" href="http://daohang.csdn.net/##" target="_blank">更多网站»</a> 
</div>

<div class="w t r">
</div>
</div>
<div id="rc8">
<div class="b2">
 <a id="cat:-1:12" class="b1" href="http://daohang.csdn.net/##" target="_blank">Database»</a></div>
<div id="bt8" class="b7">
</div>
<p>
</p>
<div class="b3">
 [数据库手册]</div>
<div class="b4">
<div>
<ul>
<li> <a id="AFrqEzdKweWohMDbD_Pw6Jg8L6lc2h05Ug:sit:0:12" href="http://www.oracle.com/technology/products/database/oracle11g/index.html"
target="_blank">Oracle 11g</a> </li>
<li> <a id="AFrqEzedWhGC7YfE8ojoeG66e2yYjdo7yA:sit:1:12" href="http://msdn2.microsoft.com/en-us/sql/default.aspx"
target="_blank">MSSQL2005</a> </li>
</ul>
</div>
</div>
<div class="b5">
<div>
 相关搜索： <span><a href="http://tag.csdn.net/" target="_blank">sp</a> <a href="http://tag.csdn.net/"
target="_blank">存储引擎</a>
</div>
</div>
<div class="b6">
<a id="mor:-1:12" href="http://daohang.csdn.net/###" target="_blank">更多网站»</a> 
</div>
<div class="w t r">
</div>
</div>
</div>




<div style="margin-left: 12px !important" class="a7container">
<div id="rc5">
<div class="b2">
 <a id="cat:-1:9" class="b1" href="http:///##" target="_blank">Architecture»</a></div>
<div id="bt5" class="b7">
</div>
<div class="b3">
 [SOA and Web Services]</div>
<div class="b4">
<div>
<ul>
<li> <a id="AFrqEzfHp--MT42Q-YpNiZngt2WRje0sqg:sit:12:9" href="http://www.ibm.com/developerworks/webservices"
target="_blank">IBM</a> </li>
<li> <a id="AFrqEzekp4Tuf4x5v6sNyadcg3BgK2vu9g:sit:13:9" href="http://java.sun.com/developer/technicalArticles/WebServices/soa/"
target="_blank">Sun</a> </li>
<li> <a id="AFrqEzfA0pJwFTX-8Dyw_Eo6RIdkKh-W0g:sit:14:9" href="http://www.oracle.com/technology/tech/soa/index.html"
target="_blank">Oracle</a> </li>
<li> <a id="AFrqEze8esXOKQNA8H6ekWob3165Qp1_vA:sit:15:9" href="http://www.sap.com/platform/esoa/index.epx"
target="_blank">SAP</a> </li>
<li> <a id="AFrqEzc6WuwrNcNwiHhbfF7yYlpH1yhxQw:sit:16:9" href="http://dev2dev.bea.com/soa/"
target="_blank">BEA</a> </li>
</ul>
</div>
</div>
<div class="b5">
<div>
 相关搜索： <span><a href="http://www.google.com/search?hl=en&rlz=1B3GGGL_enCN238CN238&q=memcached&btnG=Search"
target="_blank">memcached</a>  <a href="http://www.google.com/search?hl=en&rlz=1B3GGGL_enCN238CN238&q=msyql&btnG=Search"
target="_blank">mysql</a>  <a href="http://www.google.com/search?hl=en&rlz=1B3GGGL_enCN238CN238&q=gfs&btnG=Search"
target="_blank">gfs</a>  </span>
</div>
</div>
<div class="b6">
<a id="mor:-1:9" href="http://daohang.csdn.net/##" target="_blank">更多网站»</a> </div>
<div class="w t r">
</div>
</div>
<div id="rc7">
<div class="b2">
 <a id="cat:-1:11" class="b1" href="http://daohang.csdn.net/" target="_blank">Linux»</a></div>
<div id="bt7" class="b7">
</div>
<p>
</p>
<div class="b3">
 [Basic Linux Doc]</div>
<div class="b4">
<div>
<ul>
<li> <a id="AFrqEzc5LtmsWw9Q-atEblFiuowMFoRRGA:sit:0:11" href="http://www.kernel.org/"
target="_blank">Linux Kernel</a> </li>
<li> <a id="AFrqEzdOBUstCf7ZecsO-nkPtSM8dDB-lg:sit:1:11" href="http://tldp.org/"
target="_blank">Linux HOWTO</a> </li>
<li> <a id="AFrqEzdVQ1H1kDcepzGh9MiPL6-f9M1UGA:sit:2:11" href="http://www.gnu.org/gnu/gnu-linux-faq.html"
target="_blank">Linux-FAQ</a> </li>
<li> <a id="AFrqEzdeFCF_1l_OLMyRmrsu2b_tR7rChg:sit:3:11" href="http://www.linuxcommand.org/"
target="_blank">Shell</a> </li>
<li> <a id="AFrqEzeBWHf8Z_CKCZp-cc-gMnrSb3wVzQ:sit:4:11" href="http://www.netfilter.org/"
target="_blank">Iptables HOWTO</a> </li>
<li> <a id="AFrqEze8aXMbRh4vlAmRJsQnBlKv2WY1YQ:sit:5:11" href="http://cn.bbs.yahoo.com/"
target="_blank">Linux command</a> </li>
</ul>
</div>
</div>

<div class="b5">
<div>
 相关搜索： <span><a href="http://tag.csdn.net/" target="_blank">Kernel</a> <a
href="http://tag.csdn.net/" target="_blank">lvs</a>  <a href="http://tag.csdn.net/"
target="_blank">vim</a>  </span>
</div>
</div>
<div class="b6">
<a id="mor:-1:11" href="http://daohang.csdn.net/##" target="_blank">更多网站»</a> </div>
<div class="w t r">
</div>
</div>

<div id="rc9">

<div class="b2">
 <a id="A1" class="b1" href="http://daohang.csdn.net/###" target="_blank">Development»</a></div>
<div id="bt9" class="b7">
</div>
<div class="b3">
 [起点啊]</div>
<div class="b4">
<div>
<ul>
<li> <a id="A2" href="http://www.google.com/search?hl=en&rlz=1B3GGGL_enCN238CN238&q=ajax&btnG=Search"
target="_blank">１１１</a> </li>
<li> <a id="A3" href="http://www.python.org/"
target="_blank">２２２</a> </li>
</ul>
</div>
</div>
<div class="b5">
<div>
 相关搜索： <span><a href="http://www.google.com/search?hl=en&rlz=1B3GGGL_enCN238CN238&q=%E6%9E%B6%E6%9E%84&btnG=Search"
target="_blank">３３３３</a>
</div>
</div>
<div class="b6">
<a id="A4" href="http://daohang.csdn.net/##" target="_blank">更多网站»</a> 
</div>

<div class="w t r">
</div>
</div>
<script type="text/javascript">
var r = null, k = null, m = null, u = 0, y = 0, w = false, l = 0, B = 0, h = 0, s = 0, v = 0, H, o = [0, 308, 616], i = 0, f = [0, 0, 0, 0, 1, 1, 2, 2, 3, 3], K = (o[1] - o[0]) / 2;
function d(b) {
return document.getElementById(b)
}

function j(b) {
return (b / 2 - 1) % 3 * 2 + 4
}

function F(b, a, c, e) {
p(d("rc" + a), e); p(d("rc" + b), c); d("rc" + b).style["zIndex"] = 9999; d("rc" + a).style["zIndex"] = 9998
}

function p(b, a) {
var c = b.style;
if ("opacity" in c) {
c.opacity = a
}
else if ("MozOpacity" in c){
c.MozOpacity = a
}
else if ("KhtmlOpacity" in c) {
c.KhtmlOpacity = a
}
else if ("filter" in c) {
c.filter = "alpha(opacity=" + a * 100 + ")"
}
}

function G(b) {
var a = ['<span style="cursor:pointer" onclick="_md('];
a.push(b);
a.push(')">');
a.push(d("sd_down").innerHTML);
a.push("<b>↓</b></span>");
d("bt" + b).innerHTML = a.join("")
}

function x(b) {
var a = ['<span style="cursor:pointer" onclick="_mu('];
a.push(b);
a.push(')">');
a.push(d("sd_up").innerHTML);
a.push('<b>↑</b></span><span style="cursor:pointer"onclick="_md(');
a.push(b);
a.push(')">');
a.push(d("sd_down").innerHTML);
a.push("<b>↓</b></span>");
d("bt" + b).innerHTML = a.join("")
}

function E(b) {
var a = ['<span style="cursor:pointer" onclick="_mu('];
a.push(b);
a.push(')">');
a.push(d("sd_up").innerHTML);
a.push("<b>↑</b></span>");
if (d("bt" + b) != null) {
d("bt" + b).innerHTML = a.join("")
}
}

function C(b) {
return parseInt(b.offsetTop, 10)
}

function q(b, a) {
b.style["top"] = a + "px"
}

function D(b)
{
if (r != null) {
return
}
var a = f, c = a + 1, e = j(b), g = f[e] == c ? e : j(e); i = 0;
F(b, g, 1, 0.6);
k = d("rc" + b);
m = d("rc" + g);
l = o[c - 1]; B = o[a - 1]; h = C(k);
s = C(m); v = a; u = b; y = g;
var t = f; f = f[g]; f[g] = t; L();
var n = 32; w = false;
H = window.setInterval(I, n);
r =1
}

function M(b) {
if (r != null) {
return
}
var a = f, c = a - 1, e = f[j(b)] == c ? j(b) : j(j(b)); D(e);
F(b, e, 1, 0.6)
}

function L() {
(new Image).src = "/?ct=mov&cd=" + f.join("")
}

function I() {
if (h <= l) {
if (h + 5 + i >= l) {
q(k, l);
q(m, B);
p(k, 1);
p(m, 1);
window.clearInterval(H);
r = null;
return
}
else {
i += 2;
q(k, h + 5 + i);
q(m, s - 5 - i);
h = h + 5 + i;
s = s - 5 - i
}
}
if (!w && h >= l - K) {
if (v == 1) {
x(u); G(y)
}
else if (v == 2) {
E(u); x(y)
}
w = true
}
}
var _md = D, _mu = M;

(function() {
var b = [G, x, E];
for (var a = 4; a < 10; a++) {
b[f[a] - 1](a)
}
})();



</script>

</div>

</div>
</div>
</div>
</div>
</body>
</html>

作者: haibin666   发布时间: 2009-08-18

我的天啊，老哥你好厉害啊

都给down下来了啊

我们共同研究下，我个人认为主要是：position的属性还有，我昨天还试了下。

你如果做出来了，告诉我一下 嘿嘿

Q：604910960谢谢了，今天继续研究

作者: cancanliu   发布时间: 2009-08-19

我做了个不完全版本的，最重要的技术已实现，看看会不会给你提供点思路，呵呵~

作者: haibin666   发布时间: 2009-08-20

上移和下移的按钮控制还有点问题......

作者: xyq159589   发布时间: 2009-08-21

复制代码
  1. <?xml version="1.0" encoding="gb2312"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  7. <title>Test page</title>
  8. <meta name="Author" content="mozart0" />
  9. <style type="text/css">
  10. /*<![CDATA[*/
  11. *{border:0}
  12. ul{
  13.   width:400px
  14. }
  15. li{
  16.   border:1px solid gray;
  17.   list-style:none;
  18. }
  19. .txt{
  20.   padding:4px;
  21.   background-color:#ffffff
  22. }
  23. /*]]>*/
  24. </style>
  25. <script language="javascript" type="text/javascript">
  26. //<![CDATA
  27. window.onload=function(){
  28.   ggGroup(document.getElementById('test'),5);
  29. };
  30. function ggGroup(ele,margin){
  31.   margin=margin||10;
  32.   var bgcolors='#b3d580'.split(',');
  33.   var txtUp='上移↑ ',txtDown='下移↓';
  34.   var panels=children(ele);
  35.   for(var i=0,h=0;i<panels.length;i++){
  36.     var p=panels[i];
  37.     p.style.position='absolute';
  38.     p.style.width='100%';
  39.     var b=document.createElement('div');
  40.     with(b.style){
  41.       fontSize='12px';
  42.       padding='4px';
  43.       backgroundColor=bgcolors[i%bgcolors.length];
  44.       textAlign='right';
  45.     }
  46.     b.innerHTML='<span>'+txtUp+'</span><span>'+txtDown+'</span>';
  47.     b.firstChild.onclick=moveup;
  48.     b.firstChild.style.cursor='pointer';
  49.     b.lastChild.onclick=movedown;
  50.     b.lastChild.style.cursor='pointer';
  51.     p.insertBefore(b,p.firstChild);
  52.     p.style.top=h+'px';
  53.     p.index=i;
  54.     h+=p.offsetHeight+margin;
  55.   }
  56.   ele.style.height=h+'px';
  57.   ele.style.position='relative';  
  58.   check(0,i-1);  
  59.   function check(){
  60.     for(var i=0;i<arguments.length;i++){
  61.       var x=arguments[i];
  62.       var c=panels[x].firstChild.childNodes;
  63.       c[0].style.visibility=x==0?'hidden':'visible';
  64.       c[1].style.visibility=x==panels.length-1?'hidden':'visible';
  65.       panels[x].index=x;
  66.     }
  67.   }
  68.   function moveup(evt){
  69.     var p=evt?evt.target:event.srcElement;
  70.     p=p.parentNode.parentNode;
  71.     swap(p,panels[p.index-1]);
  72.   }
  73.   function movedown(evt){
  74.     var p=evt?evt.target:event.srcElement;
  75.     p=p.parentNode.parentNode;
  76.     swap(p,panels[p.index+1]);
  77.   }
  78.   function swap(p1,p2){
  79.     var N=10;
  80.     var INTV=200;
  81.     var arr1,arr2;
  82.     var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top);
  83.     var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin;
  84.     arr1=makeArr(t1,t1<t2?h2:-h2);
  85.     arr2=makeArr(t2,t1<t2?-h1:h1);
  86.     for(var i=0;i<N;i++)(function(){
  87.       var j=i;
  88.       setTimeout(function(){
  89.         p1.style.top=arr1[j]+"px";
  90.         p2.style.top=arr2[j]+"px";
  91.         if(j==N-1){
  92.           panels[p1.index]=p2;
  93.           panels[p2.index]=p1;
  94.           check(p1.index,p2.index);
  95.         }
  96.       },(j+1)*INTV/N);
  97.     })();
  98.     function makeArr(f,x){
  99.       var ret=[];
  100.       for(var i=0;i<N;i++)
  101.         ret[i]=Math.round(f+i*x/(N-1));
  102.       return ret;
  103.     }
  104.   }
  105.   function children(e){
  106.     var ret=[];
  107.     for(var i=0,c=e.childNodes;i<c.length;i++)
  108.       if(c[i].nodeType==1)
  109.         ret.push(c[i]);
  110.     return ret;
  111.   }
  112. }
  113. //]]>
  114. </script>
  115. </head>
  116. <body>
  117. <ul id="test">
  118.   <li>
  119.     <div class="txt"><h2>Hello<br />baby</h2></div></li>
  120.   <li>
  121.     <div class="txt">
  122.       <img src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
  123.     </div></li>
  124.   <li>
  125.     <div class="txt">
  126.       <i>人之初，性本善</i>
  127.     </div></li>
  128.   <li>
  129.     <div class="txt">
  130.       may be you are right<br />may be<br />...<br />but i don't understand
  131.     </div></li>
  132.     <li>
  133.     <div class="txt">
  134.       may be you are right<br />may be<br />...<br />but i don't understand
  135.     </div></li>
  136.     <li>
  137.     <div class="txt">
  138.       may be you are right<br />may be<br />...<br />but i don't understand
  139.     </div></li>
  140. </ul>
  141. </body>
  142. </html>

作者: xyq159589   发布时间: 2009-08-21

15楼的ok，但是没有滑动效果

作者: await   发布时间: 2009-08-21

谢谢朋友~~~~~

我下下来了~~~

不错，谢谢啊~~~

作者: shn   发布时间: 2009-08-24

引用
引用第15楼await于2009-08-21 13:57发表的  :
[code]
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
.......


哇哦~~~

朋友你这个也不错。。

谢谢啊

不过我想要用jq实现。谢谢了朋友

作者: haibin666   发布时间: 2009-08-24

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net