js实现点击某个div层置顶显示
假如有5个DIV,当点击其中任意一个时,触发单击事件,将该DIV置顶显示.求大神帮忙啊......
假如有5个DIV , 当点击其中任意一个时,触发单击事件,将该DIV置顶显示.
求大神帮忙啊... 展开
求大神帮忙啊... 展开
4个回答
展开全部
如果点击某个div层置顶显示的话
需要用到Z-index 值
而使用zIndex值 就必须对元素进行绝对定位
可以用如下方法 让被点击的层置顶
//创建一个公共Z值
var z=999;
//然后获取所有div
var aDiv=document.getElementsByTagName('div');
//遍历元素
for(var i=0;i<aDiv.length;i++){
//添加事件
aDiv[i].onclick=function(){
//控制当前点击的div每次点击就z++
//比如这次点击了z值到了1000
//然后下一个div点击的时候
//把这个值赋给他 然后他还++一次 变成1001
//这样那个又是最高的了
this.style.zIndex=z++
}
};
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
body {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
div {
width: 100px;
height: 100px;
text-align: left;
border: 1px solid black;
position: relative;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
jQuery (function ($)
{
var deltaX = 0, deltaY = 0;
var docu = $ (document);
init (docu.find('body'), 52);
randomColorZIndex (docu);
docu.mouseup (function (event)
{
$ (this).unbind ('mousemove');
return destroy (event);
});
});
var destroy = function (event)
{
if (!!$.browser.msie)
{
event.returnValue = false;
event.cancelBubble = true;
}
else
{
event.preventDefault ();
event.stopPropagation ();
}
return false;
}
var reorder = function (div)
{
div.css ('z-index', $('div').length);
var zIndex = 1, arr = $('div').not('div:eq('+div.index('div')+')');
arr.sort(function(a, b)
{
var f = parseInt(a.style.zIndex, 10);
var s = parseInt(b.style.zIndex, 10);
if (f > s)
{
return 1;
}
else if (f < s)
{
return -1;
}
else
{
return 0;
}
});
arr.each(function(i, dom)
{
$(this).css ('z-index', zIndex + i);
});
}
var randomColorZIndex = function (docu)
{
var zIndex = 1;
$ ('div').each (function (i, dom)
{
var div = $(this);
div.css ('z-index', zIndex + i);
var r = Math.floor(Math.random () * 255), g = Math.floor(Math.random () * 255), b = Math.floor(Math.random () * 255);
div.css ('background-color', 'rgb(' + r + ',' + g + ',' + b + ')');
if (i > 0)
{
div.css
({
'left': parseFloat(div.prev('div').css('left')) + 40 + 'px',
'top': parseFloat(div.prev('div').css('top')) - 80 + 'px'
});
}
div.mousedown (function (event)
{
if (event.which != 1)
{
return destroy (event);
}
reorder(div);
div.css ('cursor', 'move');
var left = parseFloat (this.style.left) || this.clientLeft;
var top = parseFloat (this.style.top) || this.clientTop;
deltaX = event.clientX - left;
deltaY = event.clientY - top;
docu.mousemove (function (event)
{
div.css
({
'left': event.clientX - deltaX + 'px',
'top': event.clientY - deltaY + 'px'
});
return destroy (event);
});
return destroy (event);
}).mouseup (function ()
{
div.css ('cursor', 'pointer');
});
});
}
var init = function (body, num)
{
for ( var i = 0; i < num; i++)
{
body.append('<div><font color="white">第' + ( i + 1 ) + '个层</font></div>');
}
body.find('div:first').css
({
'left': '0px',
'top': '0px'
});
}
document.onselectstart=document.ondragstart=document.oncontextmenu=function () {return false;};
</script>
</head>
<body>
</body>
</html>
更多追问追答
追问
老兄 辛苦你了,我的问题已经解决了.
追答
不用，我的这个答案是以前写的，随便放上来就可以解决你的问题。看来你不懂的很多很多
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
设置各个层的z-index
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
设置各个层的z-index
追问
你这样达不到使层的z-index值循环递增,也就是当你之前点击过的某个层再被点击时,该层就不能被置顶了.
追答
复制不完。反正行。就js在这里了
<script>
window.onload = function () {
for (var i = 0; i < document.getElementsByTagName("div").length; i++) {
document.getElementsByTagName("div")[i].onclick = function () {
this.style.zIndex = 4;
}
document.getElementsByTagName("div")[i].onmouseout = function () {
this.style.zIndex =1;
}
}
}
</script>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
