需求
上移下移
需求：
1）点击上移就将当前的按钮的父级上移一位
2）当点击第一个时候将当前按钮的父级移动到最后一位
3）当点击最后一个时候将当前按钮的父级移动到首位
4）带过渡动画
需求分析：
下移：剪切所点击的条目插入到下一条目后面
上移：剪切所点击的条目插入到上一条目前面
过渡效果实现：CSS3的transition 或 js实现
实现思路：
transition实现方法，先在CSS里设置好transition: 1s top; 这个样式，然后鼠标点击修改top值触发过渡效果。
需要用js给每一个li设置top值，因为insertBefore会中断transition所以还必须设个定时器，等到过渡结束再执行DOM层面的剪切
难点：
边界的判断：当第一项点击上移是应该移动到最下面其他都上移一层
当最后一项点击下移时应该移动到最上面其他都下移一层
insertBefore为什么会中断transition的执行？？？
难点解决方案：
前两项都可以解决
最后一项想不通！！！？？？
涉及的新知识：
element.priviousSibling
element.nextSibling
element.parentNode
element.nodeType
parentNode.insertBefore( newEle , targetEle );
优化方向：
不用定时器也能实现DOM层面和视觉层面一起上移下移且有过渡动画
修复连续点击的bug
封装成一个函数
备注：
写完这个，稍微有点懂得【视觉层】和【行为层】分开的意义了，也稍微感觉到了一点React的数据驱动视图了。其实页面上看到的天花乱坠，DOM里可能啥都每变，看起来div在那个div的上门，其实是用css强行改变它们的默认排列的，所以要从DOM的视角看问题。
最后：为什么insertBefore会中断transition？？？？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
ul{ position: relative; }
li{
position: absolute;
transition: .5s top;
}
</style>
</head>
<body>
<!--
上移下移
需求：
1）点击上移就将当前的按钮的父级上移一位
2）当点击第一个时候将当前按钮的父级移动到最后一位
3）当点击最后一个时候将当前按钮的父级移动到首位
跨展板：
移动时带动画
-->
<ul id="oUl">
<li>第一项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>
<li>第二项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>
<li>第三项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>
<li>第四项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>
<li>第五项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>
</ul>
<script src="getId.js"></script>
<script src="doMove.js"></script>
<script src="main.js"></script>
</body>
</html>
var oUl = $(‘oUl‘);
var oLi = oUl.getElementsByTagName(‘li‘);
for(var i=0, oLen=oLi.length; i<oLen; i++){
oLi[i].style.top = (i*16 + i*6) + ‘px‘;
//****上移按钮
oLi[i].getElementsByTagName(‘a‘)[0].onclick = function(){
var oldTop = null,
nextTop = null,
nextItem = getSiEle( this.parentNode , -1 );
//点击第一项要做的事
if( !nextItem ){
nextTop = oUl.children[oUl.children.length-1].style.top;
//2~5项向上移1格
for( var j=oUl.children.length-1; j>0; j-- ){
oLi[j].style.top = oLi[j-1].style.top;
}
this.parentNode.style.top = nextTop;
}else{
//如果不是最后一项就两两对换
oldTop = this.parentNode.style.top;
nextTop = getSiEle( this.parentNode , -1 ).style.top;
this.parentNode.style.top = nextTop;
getSiEle( this.parentNode , -1 ).style.top = oldTop;
}
//等0.5s的transition结束后在执行DOM剪切操作
var _this = this;
setTimeout(function(){
if( !moveUp( _this.parentNode ) ){
oUl.appendChild( _this.parentNode )
}
},500);
}
//****上移按钮结束****//
//****下移按钮开始
oLi[i].getElementsByTagName(‘a‘)[1].onclick = function(){
var oldTop = null,
nextTop = null,
nextItem = getSiEle( this.parentNode , 1 );
//点击最后第一项要做的事
if( !nextItem ){
nextTop = oUl.children[0].style.top;
//1~4项的位置下降“1格”
for(var j=0,oLen=oUl.children.length; j<oLen-1; j++ ){
oLi[j].style.top = oLi[j+1].style.top
}
//点击项升到顶端
this.parentNode.style.top = nextTop;
}else{
//如果不是最后一项就两两对换
oldTop = this.parentNode.style.top;
nextTop = getSiEle( this.parentNode , 1 ).style.top;
this.parentNode.style.top = nextTop;
getSiEle( this.parentNode , 1 ).style.top = oldTop;
}
//等0.5s的transition结束后在执行DOM剪切操作
var _this = this;
setTimeout(function(){
if( !moveDown( _this.parentNode ) ){
insertBefore( _this.parentNode , oUl.children[0] );
}
},500);
}
//****下移按钮结束****//
}
function $( v ){
if(typeof v === ‘function‘){
window.onload = v;
}else if(typeof v === ‘string‘){
return document.getElementById( v );
}else if(typeof v === ‘object‘){
return v;
}
}
function getStyle( obj,attr ){
var arr = ‘‘;
for(var i=0; i<attr.length; i++){
if(attr[i] != ‘ ‘)
arr += attr[i];
}
return obj.currentStyle ? obj.currentStyle[arr] : getComputedStyle(obj)[arr];
}
function $class(typeEle,attr){
var oChild = document.getElementsByTagName(typeEle);
var arr = [];
for(var i=0; i<oChild.length; i++){
if( oChild[i].className == attr ){
arr.push(oChild[i]);
}
}
return arr;
}
function getSiEle( ele , v ){
//-1代表查找前一个兄弟元素，1代表查找后一个兄弟元素
//开始查找前判断本元素是不是第一个元素或最后一个元素，如果是返回false
//开始查找
if( v === -1 ){
v = ‘previousSibling‘;
if( ele.parentNode.children[0] == ele ){
return false;
}
}
if( v === 1 ){
v = ‘nextSibling‘;
if( ele == ele.parentNode.children[ ele.parentNode.children.length-1 ] ){
return false;
}
}
var theParent = ele[v];
while( theParent.nodeType != 1 ){
theParent = theParent[v];
}
return theParent;
}
//重新包装一下
function insertBefore( newEle , targetEle ){
targetEle.parentNode.insertBefore( newEle , targetEle );
}
//向targetEle后面插入一个元素节点
function insertAfter( newEle , targetEle ){
var tNextSibling = targetEle.nextSibling;
var targetEleParent = targetEle.parentNode;
if( tNextSibling ){
targetEleParent.insertBefore( newEle , tNextSibling );
}else{
targetEleParent.appendChild( newEle );
}
}
//上移
function moveUp( ele ){
var tSiEle = getSiEle( ele , -1 );
if( !tSiEle ){
return false;
}
ele.parentNode.insertBefore( ele , tSiEle );
return true;
}
//下移
function moveDown( ele ){
var tSiEle = getSiEle( ele , 1 );
if( !tSiEle ){
return false;
}
insertAfter( ele , tSiEle );
console.log(555);
return true;
}
/*
while(true){
if( oDiv[oDiv.length-1] != 400 ){
FdoMove(400);
}else{
FdoMove(0);
}
}
function FdoMove(endStep){
document.onclick = function(){
clearInterval(attrs.timer);
attrs.timer = setInterval(function(){
if(endStep != 0){
if( parseInt(oDiv[attrs.i].style.top) == endStep )
attrs.i++;
if( attrs.i < oDiv.length ){
doMove( oDiv[attrs.i], ‘top‘, 90, endStep );
}else{
clearInterval(attrs.timer);
attrs.timer = null;
}
}else{
if( parseInt(oDiv[attrs.lastNum].style.top) == endStep )
attrs.lastNum--;
if( attrs.lastNum >= endStep ){
doMove( oDiv[attrs.lastNum], ‘top‘, 90, endStep );
}else{
clearInterval(attrs.timer);
attrs.timer = null;
}
}
},90);
}
}*/
原文地址：https://www.cnblogs.com/mflnhg/p/9503309.html
时间： 2024-10-08 12:28:32