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

小玩子苗苗 2013-06-13 04:05:33

<!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的页面总会先闪一下

...全文

316 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

小玩子苗苗 2013-06-14

打赏
举报

引用 10 楼 xzy21com 的回复:

单纯向左移动是没问题，左右间隔移动仍有问题。我觉得应该拖动后，鼠标松开后才切换比较好。这效果值得研究下。

拜托拜托还是右移有点问题有解决办法了么？我思路乱七八糟的前面也都是蒙的该怎么做？

小玩子苗苗 2013-06-14

打赏
举报

引用 17 楼 xzy21com 的回复:

这代码无版权，乱发布不追究！

谢谢

scscms太阳光 2013-06-14

打赏
举报

这代码无版权，乱发布不追究！

小玩子苗苗 2013-06-14

打赏
举报

引用 13 楼 xzy21com 的回复:

重要解决了左右移动正确显示下一张问题，动画效果自己改进。测试拖动一张图片左右摆动，或者不断快速向左或右移动图片。

大牛，我可不可以把你的代码打包下发布到网上供大家参考啊，毕竟版权是你的。还是得问问，而且这个运动写的比我的好。

小玩子苗苗 2013-06-14

打赏
举报

引用 13 楼 xzy21com 的回复:

重要解决了左右移动正确显示下一张问题，动画效果自己改进。测试拖动一张图片左右摆动，或者不断快速向左或右移动图片。

谢谢，这样就好太多了，哈哈。

小玩子苗苗 2013-06-14

打赏
举报

引用 13 楼 xzy21com 的回复:

重要解决了左右移动正确显示下一张问题，动画效果自己改进。测试拖动一张图片左右摆动，或者不断快速向左或右移动图片。

好，我试试，谢谢。

scscms太阳光 2013-06-14

打赏
举报

重要解决了左右移动正确显示下一张问题，动画效果自己改进。测试拖动一张图片左右摆动，或者不断快速向左或右移动图片。

scscms太阳光 2013-06-14

打赏
举报

<!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>

scscms太阳光 2013-06-13

打赏
举报

单纯向左移动是没问题，左右间隔移动仍有问题。我觉得应该拖动后，鼠标松开后才切换比较好。这效果值得研究下。

小玩子苗苗 2013-06-13

打赏
举报

<!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();
							aContent[aContent.length-1].style.zIndex=1;
							startMove(_this,{left:0});
						}
						else
						{
							divHide();
							if(_this.index-2>=0)
							{
								aContent[_this.index-1].style.zIndex = 2;
								aContent[_this.index-2].style.zIndex = 1;
							}
							else
							{
								aContent[_this.index-1].style.zIndex = 2;
								aContent[aContent.length-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=2;
								aContent[1].style.zIndex=1;
								startMove(_this,{left:0});
							}
							else
							{
								divHide();
								if(_this.index+2<=(aContent.length-1))
								{
									aContent[_this.index+1].style.zIndex =2;
									aContent[_this.index+2].style.zIndex = 1;
								}
								else
								{
									aContent[_this.index+1].style.zIndex = 2;
									aContent[0].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>

左移已经没有问题了问题是右移

枫醉秋 2013-06-13

打赏
举报

还是z-index的问题，我看了一下代码，你是在拖的才去改变z-index的，想一个好的算法修改一下z-index

小玩子苗苗 2013-06-13

打赏
举报

引用 2 楼 ZXY900213 的回复:

没有吧？？我在Chrome, Firefox, Safari, IE8 测试都没闪啊。。

不是闪烁，就是6666先出现，其他的页面再出现。

小玩子苗苗 2013-06-13

打赏
举报

引用 3 楼 scqlmm 的回复:

没有，我在Chrome, Firefox, Safari, IE10测试都好着啊

不算闪吧就是那个66666的页面会先出现紧接着其他的页面才出现

小玩子苗苗 2013-06-13

打赏
举报

引用 4 楼 shuixiya1999 的回复:

总结一下, 问题就是你的算法不好. z-index 除了1 其他的都设置为0. 这样的话肯定是最后一张6666必定在所有0中是具有最高优先权显示出来的. 以上是原因解决方法是: 每个content都应该有不同z-index, 并且每次事件中最新的z-index为(最大zIndex+1) 不需要完美的,忽略以下对解决方法的补充: 基本上上面的方法就能搞定了, 防止出现变态的不停的点,导致zIndex无比巨大情况. 只要判断zIndex到达一定值, 跟换一批z-index就可以了.(是一批, 不是一个)

开始考虑到这一块了但是感觉这样会更加的繁琐想不透所以用的这个方法现在左移没有问题了问题都出在了右移我设置了zIndex=2或者1 这样有个落差

汉尼拔 2013-06-13

打赏
举报

总结一下, 问题就是你的算法不好. z-index 除了1 其他的都设置为0. 这样的话肯定是最后一张6666必定在所有0中是具有最高优先权显示出来的. 以上是原因解决方法是: 每个content都应该有不同z-index, 并且每次事件中最新的z-index为(最大zIndex+1) 不需要完美的,忽略以下对解决方法的补充: 基本上上面的方法就能搞定了, 防止出现变态的不停的点,导致zIndex无比巨大情况. 只要判断zIndex到达一定值, 跟换一批z-index就可以了.(是一批, 不是一个)

枫醉秋 2013-06-13