一个关于zIndex的有关问题（拖拽的）

2013-06-19

一个关于zIndex的问题（拖拽的）!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://

一个关于zIndex的问题（拖拽的）

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
<!--
*{margin:0;padding:0;}
#wrap{width:400px;height:400px;position:relative;margin:50px auto;}
.content{background:#000;color:#fff;position:absolute;top:0;left:0;width:400px;height:400px;text-align:center;line-height:25px;unselectable:on;-moz-user-select:-moz-none;cursor:pointer;}
-->
</style>
<body>
<div id="wrap">
<div class="content">
    1111111111111<br />
    1111111111111<br />
    1111111111111<br />
    1111111111111<br />
    1111111111111<br />
    1111111111111<br />
    1111111111111<br />
    1111111111111<br />
    1111111111111<br />
    </div>
    <div class="content">
    2222222222222<br />
    2222222222222<br />
    2222222222222<br />
    2222222222222<br />
    2222222222222<br />
    2222222222222<br />
    2222222222222<br />
    2222222222222<br />
    2222222222222<br />
    2222222222222<br />
    2222222222222<br />
    </div>
    <div class="content">
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    3333333333333<br />
    </div>
    <div class="content">
    4444444444444<br />
    4444444444444<br />
    4444444444444<br />
    4444444444444<br />
    4444444444444<br />
    4444444444444<br />
    4444444444444<br />
    4444444444444<br />
    4444444444444<br />
    4444444444444<br />
    4444444444444<br />
    </div>
    <div class="content">
    5555555555555<br />
    5555555555555<br /> 
 
    5555555555555<br />
    5555555555555<br />
    5555555555555<br />
    5555555555555<br />
    5555555555555<br />
    5555555555555<br />
    5555555555555<br />
    5555555555555<br />
    5555555555555<br />
    5555555555555<br />
    </div>
    <div class="content">
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    6666666666666<br />
    </div>
</div>
<script type="text/javascript">
//通过class选取元素
function getByClass(oParent,sClass)
{
var aEle=oParent.getElementsByTagName('*');
var i=0;
var aResult=[];
var re=new RegExp('\\b'+sClass+'\\b','i');   //去掉class左右的空格
for(i=0;i<aEle.length;i++)
{
if(re.test(aEle[i].className))
{
aResult.push(aEle[i]);
}
}
return aResult;

}
//得到非行间样式
function getStyle(obj,attr)
{
if(obj.currentStyle)//行间样式
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];  //非行间样式
}
}
//运动框架
function startMove(obj,json,fn)
{
clearInterval(obj.timer);     //先清除所有的运动
obj.timer=setInterval(function(){
var bStop=true;   //假设所有的运动都停止了
for(attr in json)
{
//1.去当前值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}
else
{
iCur=parseInt(getStyle(obj,attr));
}

//2.计算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

//3.检测停止
if(iCur!=json[attr])
{
bStop=false;  //假设有一项运动没有完成，则不停止
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}

},20)
}
function drag(id)
{
var oWrap=document.getElementById(id);
var aContent=getByClass(oWrap,'content');
var i=0;
for(i=0;i<aContent.length;i++)
{
aContent[i].index=i;
aContent[i].onmousedown=function(ev)
{
var oEvent=ev||event;
var _this=this;
var disX=oEvent.clientX-_this.offsetLeft;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
if(_this.offsetLeft>oEvent.clientX-disX) 
 
{
startMove(_this,{left:-(_this.offsetWidth/2+100),},function(){
if(_this.index==0)
{
divHide(_this.index);
aContent[aContent.length-1].style.zIndex=1;
startMove(_this,{left:0});
}
else
{
divHide();
aContent[_this.index-1].style.zIndex = 1;
startMove(_this,{left:0})
}
});
}
else if(_this.offsetLeft<oEvent.clientX-disX)
{
startMove(_this,{left:_this.offsetWidth/2+100},function(){
if(_this.index==aContent.length-1)
{
divHide();
aContent[0].style.zIndex=1;
startMove(_this,{left:0});
}
else
{
divHide();
aContent[_this.index + 1].style.zIndex = 1;
startMove(_this,{left:0});
}
})
}
}
document.onmouseup=function()
{
document.onmousemove=null;
document.onmousedown=null;
}
}
}
function divHide()
{
for(var i=0;i<aContent.length;i++)
{
aContent[i].style.zIndex=0;
}
}
}
window.onload=function()
{
drag('wrap');
}
</script>
</body>
</html>

问题就是左右拖动的时候那个666666的页面总会先闪一下
[解决办法]
没有吧？？我在Chrome, Firefox, Safari, IE8 测试都没闪啊。。
[解决办法]
没有，我在Chrome, Firefox, Safari, IE10测试都好着啊
[解决办法]
总结一下, 问题就是你的算法不好.

z-index 除了1 其他的都设置为0.
这样的话肯定是最后一张6666必定在所有0中是具有最高优先权显示出来的.

以上是原因
解决方法是: 每个content都应该有不同z-index, 并且每次事件中最新的z-index为(最大zIndex+1)

不需要完美的,忽略以下
对解决方法的补充: 基本上上面的方法就能搞定了, 防止出现变态的不停的点,导致zIndex无比巨大情况.
只要判断zIndex到达一定值, 跟换一批z-index就可以了.(是一批, 不是一个)
[解决办法]

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
</head>
<style type="text/css">
    body{margin:0;padding:0;text-align: center}
    #wrap{width:400px;height:400px;position:relative;margin:50px auto;}
    .content{background:#000;color:#fff;position:absolute;top:0;left:0;width:400px;height:400px;text-align:center;line-height:25px;unselectable:on;-moz-user-select:-moz-none;cursor:pointer;border: 1px solid #fff}
</style>
<body>
<div id="wrap">
    <div class="content">
        1111111111111<br />
        1111111111111<br /> 
 
        1111111111111<br />
        1111111111111<br />
        1111111111111<br />
        1111111111111<br />
        1111111111111<br />
        1111111111111<br />
        1111111111111<br />
    </div>
    <div class="content">
        2222222222222<br />
        2222222222222<br />
        2222222222222<br />
        2222222222222<br />
        2222222222222<br />
        2222222222222<br />
        2222222222222<br />
        2222222222222<br />
        2222222222222<br />
        2222222222222<br />
        2222222222222<br />
    </div>
    <div class="content">
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
        3333333333333<br />
    </div>
    <div class="content">
        4444444444444<br />
        4444444444444<br />
        4444444444444<br />
        4444444444444<br />
        4444444444444<br />
        4444444444444<br />
        4444444444444<br />
        4444444444444<br />
        4444444444444<br />
        4444444444444<br />
        4444444444444<br />
    </div>
    <div class="content">
        5555555555555<br />
        5555555555555<br /> 
 
        5555555555555<br />
        5555555555555<br />
        5555555555555<br />
        5555555555555<br />
        5555555555555<br />
        5555555555555<br />
        5555555555555<br />
        5555555555555<br />
        5555555555555<br />
        5555555555555<br />
    </div>
    <div class="content">
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
        6666666666666<br />
    </div>
</div>
<script type="text/javascript">
    //通过class选取元素
    function getByClass(oParent,sClass){
        var aEle=oParent.getElementsByTagName('*');
        var aResult=[];
        var re=new RegExp('\\b'+sClass+'\\b','i');   //去掉class左右的空格
        for(var i=0;i<aEle.length;i++){
            if(re.test(aEle[i].className)){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }
    //得到样式
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        }
    }
    function drag(id){
        var oWrap=document.getElementById(id);
        var aContent=getByClass(oWrap,'content');
        function cut(b,n){
            n+=b;
            if(n<0)n=aContent.length-1; 
 
            if(n>aContent.length-1)n=0;
            for(var i=0;i<aContent.length;i++){
                if(i==n){
                    aContent[i].style.zIndex=2;
                }else if(i!=b){
                    aContent[i].style.zIndex=1;
                }
            }
        }
        function move(obj,x){
            obj.style.border="1px solid #ff3300";
            var i=x>0?-5:5;
            var st=null,_x=Math.floor(x);
            if(Math.abs(x)>200){
                obj.style.zIndex=1;
            }else{
                //需要返回原点
                obj.style.filter="alpha(opacity=100)";
                obj.style.opacity=1;
            }
            function b(){
                _x+=i;
                obj.style.left=_x+"px";
                if(Math.abs(_x)<10){
                    clearInterval(st);
                    obj.style.left=0;
                    obj.style.filter="alpha(opacity=100)";
                    obj.style.opacity=1;
                    obj.style.border="1px solid #fff";
                    obj.move=false;
                }
            }
            st=setInterval(b,20);
        }
        for(var i=0;i<aContent.length;i++){
            aContent[i].index=i; 
 
            aContent[i].move=false;
            aContent[i].onmousedown=function(ev){
                if(this.move)return false;
                this.move=true;
                var oEvent=ev
[解决办法]
event;
                var _this=this, x,direction="";
                var disX=oEvent.clientX-_this.offsetLeft;
                //_this.style.filter="alpha(opacity=50)";
                //_this.style.opacity=0.5;
                _this.style.border="1px solid red";
                _this.style.zIndex=3;
                document.onmousemove=function(ev){
                    var oEvent=ev
[解决办法]
event;
                    x=oEvent.clientX - disX;//x坐标位移量
                    _this.style.left =  x + "px";//移动中
                    if(x<0&&direction!="left"){
                        direction="left";
                        cut(_this.index,1);
                    }else if(x>0&&direction!="right"){
                        direction="right";
                        cut(_this.index,-1);
                    }
                    document.onmouseup=function(){
                        move(_this,x);
                        document.onmousemove = document.onmouseup = null;
                    }; 
 
                };

            }
        }
    }
    window.onload=function(){
        drag('wrap');
    }
</script>
</body>
</html>

热点排行

Bad Request.

JavaScript

一个关于zIndex的有关问题（拖拽的）