个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有一叠卡片。它们堆叠在一起，因此每个底部都有大约一厘米的可见空间。我想要的是，当单击一张卡片时，它会移动到右侧，然后排序到顶部并移到左侧回到堆上。然后我希望触发页面更改(到卡片所代表的页面)。
我如何通过 JQuery 做到这一点？我对这门语言还处于初级水平。
<style>
#cardStack{
height: 700px;
width: 400px;
overflow:visible;
}
#cardStack ul{
display:inline;
}
#cardStack li{
z-index:auto;
}
.top{
margin-top:-670px;
z-index:1;
}
.middle{
margin-top:-670px;
z-index:2;
}
.bottom{
margin-top:100px;
z-index:3;
}
</style>
</head>
<body><br /><br />
<div id="cardStack">
<ul>
<li class="bottom"><img src="images/cardA.png" /></li>
<li class="middle"><img src="images/card6.png" /></li>
<li class="top"><img src="images/card8.png" /></li>
</ul>
</div>
我知道有一个动画功能，但我如何在点击时启动它？
编辑:在上面添加了更多代码
最佳答案
对于哈希更改，请使用 ben alman's BBQ plugin尝试了您的代码 jsbin
但由于缺少卡片链接，HTML 无法正确呈现
如果你在这里放一个有效的 jsbin 示例 - 帮助你会更容易
关于动画:如果您将 Li 布局为具有绝对位置，则可以自由移动它们，
所以你可以将它们动画化到左侧，然后动画化回来，然后更改 z-index 将其放在顶部
[编辑]所以..here is a link to a quick solution :
您的动画代码有一些问题，+最好更改位置而不是边距
引用代码:
$('#cardStack img').click(function ()
{
var img = $(this);
img.animate({left: '+=50px'},200,function()
{
img.animate({left: '-=50px'},200,function()
{
img.parent().prependTo($("ul"));
arrengeClasses();
});
});
});
function arrengeClasses()
{
var allListItems = $("#cardStack ul li");
for(var i=0;i<allListItems.length;++i)
{
allListItems.eq(i).removeClass().addClass("pos" + i);
}
}
并稍微更改了 css:
#cardStack li img{
position:absolute;
top:0px;
left:0px;
}
.pos2{
z-index:1;
margin-top:100px;
}
.pos1{
z-index:2;
margin-top:50px;
}
.pos0{
z-index:3;
}
关于javascript - JQuery 卡片叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4013482/
27
4
0
我是一名优秀的程序员,十分优秀！