Jquery元素定位等等
嘿,伙计们,我通常对编辑很在行,但这次我想我应该试试Jquery的新功能。我试图创建一个“3D”卡片页面(类似于此:),但我无法定位元素,我认为我的代码都错了 以下是JS:Jquery元素定位等等,jquery,html,css,positioning,Jquery,Html,Css,Positioning,嘿,伙计们,我通常对编辑很在行,但这次我想我应该试试Jquery的新功能。我试图创建一个“3D”卡片页面(类似于此:),但我无法定位元素,我认为我的代码都错了 以下是JS: $(document).ready(function() { //perform actions when DOM is ready var z = 0; //for setting the initial z-index's var inAnimation = false; //flag for testing
$(document).ready(function() { //perform actions when DOM is ready
var z = 0; //for setting the initial z-index's
var inAnimation = false; //flag for testing if we are in a animation
var imgLoaded = 0; //for checking if all images are loaded
$('.img').each(function() {
z++;
$(this).css('z-index', z);
imgLoaded++;
});
function swapFirstLast(isFirst) {
if(inAnimation) return false; //if already swapping pictures just return
else inAnimation = true; //set the flag that we process a image
var processZindex, direction, newZindex, inDeCrease; //change for previous or next image
if(isFirst) {
processZindex = z; newZindex = 1; inDeCrease = 1;
} else {
processZindex = 1; newZindex = z; inDeCrease = -1;
} //set variables for "next" and "previous" action
$('.img').each(function() { //process each image
if($(this).css('z-index') == processZindex) { //if its the image we need to process
$(this).animate({ opacity: 0,top: $(this).height() + 'px' }, 'slow', function() {
$(this).css('z-index', newZindex) //set new z-index
.animate({top : '0' }, 'slow', function() {
inAnimation = false; //reset the flag
$(this).animate({ opacity: 1 }, 500);
});
});
} else { //not the image we need to process, only in/de-crease z-index
$(this).animate({top : '0' }, 'slow', function() { //make sure to wait swapping the z-index whe
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
});
}
});
return false; //don't follow the clicked link
}
$('#next a').click(function() {
return swapFirstLast(true); //swap first image to last position
});
$('#prev a').click(function() {
return swapFirstLast(false); //swap last image to first position
});
});
下面是HTML:
<html>
<head>
<style type="text/css">
ul { list-style: none;
margin: 200px;}
#pictures { position: relative; height: 408px;}
.img {
position: absolute;
top: 10;
left: 0;
padding: 10px;
background: #eee;
border: 1px solid #fff;
-webkit-transform: translate(0px, 0px) skew(0deg, 5deg);
}
.desc {
max-height: 30px;
text-align: center;
padding: 10px 10px 0 10px;
}
li {
border: 5px solid #c4c8cc;
-moz-box-shadow: 3px 3px 10px #888;
-webkit-box-shadow: 3px 3px 10px #888;
padding: 200px;
}
</style>
</head>
</html>
<div id="gallery">
<ul id="pictures">
<li class="img">
<div class="desc">Hello World</div>
</li>
<li class="img">
<div class="desc">Hello World</div>
</li>
</ul>
</div>
ul{列表样式:无;
边距:200px;}
#图片{位置:相对;高度:408px;}
.img{
位置:绝对位置;
排名前10名;
左:0;
填充:10px;
背景:#eee;
边框:1px实心#fff;
-webkit变换:平移(0px,0px)倾斜(0deg,5deg);
}
.描述{
最大高度:30px;
文本对齐:居中;
填充:10px 10px 0 10px;
}
李{
边框:5px实心#c4c8cc;
-莫兹盒阴影:3px 3px 10px#888;
-网络工具包盒阴影:3px 3px 10px#888;
填充:200px;
}
-
你好,世界
-
你好,世界
很抱歉弄得一团糟,但我正赶着完成这件事——非常感谢所有的帮助:D@keiran,你真的很接近。我把你的内容放到jsbin上了。不确定你想要最后的东西是什么样子。这似乎是功能性的 希望这有帮助
Bob请看一下关于格式的帖子指南,看看你是否能稍微整理一下。谢谢。我已经格式化了-你是指论坛帖子本身还是代码?看起来meagar已经处理好了。这不是我以前读过的最简单的事情(尽管也不是最坏的情况)。至于“卡片”动画,我不会有太多帮助,但至少那些可以帮助的人会看到正在进行的更好。谢谢-第一次发布。遗憾的是,我不知道如何在这里正确地组织和格式化。