本来是很简单的一个功能,可是一开始弄的时候,还有 IE 能实现,FF 总是不能实现,在网上看了半天,也没弄出个所以然,所以在同事的帮忙下,总算弄出来了,浏览器的兼容性考的还是细节上面的东西,所有关于细节的,我会用注释标出来的。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这里给大家分享的是项目中的一个小需求,本来很简单,可是整了好久才把 FF 的兼容性搞定。
- <!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">
- <head>
- <title>
- 仿265上下层的移动(上移,下移)支持IE、FF
- </title>
- <style type="text/CSS">
- /*
- <![CDATA[*/ ul{ width:400px } li{ border:1px solid gray; list-style:none
- } .txt{ padding:4px; background-color:#ffffff } /*]]>
- */
- </style>
- <script language="javascript" type="text/javascript">
- //<![CDATA
- window.onload = function() {
- ggGroup(document.getElementById('test'), 5);
- };
- function ggGroup(ele, margin) {
- margin = margin || 0;
- var bgcolors = '#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(',');
- var txtUp = '上移↑ ',
- txtDown = '下移↓';
- var panels = children(ele);
- for (var i = 0,
- h = 0; i < panels.length; i++) {
- var p = panels[i];
- p.style.position = 'absolute';
- p.style.width = '100%';
- var b = document.createElement('div');
- with(b.style) {
- fontSize = '12px';
- padding = '4px';
- backgroundColor = bgcolors[i % bgcolors.length];
- textAlign = 'right';
- }
- b.innerHTML = '<span>' + txtUp + '</span><span>' + txtDown + '</span>';
- b.firstChild.onclick = moveup;
- b.firstChild.style.cursor = 'pointer';
- b.lastChild.onclick = movedown;
- b.lastChild.style.cursor = 'pointer';
- p.insertBefore(b, p.firstChild);
- p.style.top = h + 'px';
- p.index = i;
- h += p.offsetHeight + margin;
- }
- ele.style.height = h + 'px';
- ele.style.position = 'relative';
- check(0, i - 1);
- function check() {
- for (var i = 0; i < arguments.length; i++) {
- var x = arguments[i];
- var c = panels[x].firstChild.childNodes;
- c[0].style.visibility = x == 0 ? 'hidden': 'visible';
- c[1].style.visibility = x == panels.length - 1 ? 'hidden': 'visible';
- panels[x].index = x;
- }
- }
- function moveup(evt) {
- var p = evt ? evt.target: event.srcElement;
- p = p.parentNode.parentNode;
- swap(p, panels[p.index - 1]);
- }
- function movedown(evt) {
- var p = evt ? evt.target: event.srcElement;
- p = p.parentNode.parentNode;
- swap(p, panels[p.index + 1]);
- }
- function swap(p1, p2) {
- var N = 10;
- var INTV = 200;
- var arr1, arr2;
- var t1 = parseInt(p1.style.top),
- t2 = parseInt(p2.style.top);
- var h1 = p1.offsetHeight + margin,
- h2 = p2.offsetHeight + margin;
- arr1 = makeArr(t1, t1 < t2 ? h2: -h2);
- arr2 = makeArr(t2, t1 < t2 ? -h1: h1);
- for (var i = 0; i < N; i++)(function() {
- var j = i;
- setTimeout(function() {
- p1.style.top = arr1[j] + "px";
- p2.style.top = arr2[j] + "px";
- if (j == N - 1) {
- panels[p1.index] = p2;
- panels[p2.index] = p1;
- check(p1.index, p2.index);
- }
- },
- (j + 1) * INTV / N);
- })();
- function makeArr(f, x) {
- var ret = [];
- for (var i = 0; i < N; i++) ret[i] = Math.round(f + i * x / (N - 1));
- return ret;
- }
- }
- function children(e) {
- var ret = [];
- for (var i = 0,
- c = e.childNodes; i < c.length; i++) if (c[i].nodeType == 1) ret.push(c[i]);
- return ret;
- }
- }
- //]]>
- </script>
- </head>
- <body>
- <ul id="test">
- <li>
- <div class="txt">
- <h2>
- Hello
- <br />
- baby
- </h2>
- </div>
- </li>
- <li>
- <div class="txt">
- 显示内容1显示内容1显示内容1显示内容1
- </div>
- </li>
- <li>
- <div class="txt">
- <i>
- 人之初,性本善
- </i>
- </div>
- </li>
- <li>
- <div class="txt">
- 显示内容2
- <br />
- 显示
- <br />
- ...
- <br />
- 显示内容2!
- </div>
- </li>
- </ul>
- </body>
- </html>
来源: