CSS3 animate slideup下的操作提示效果实例页面

展示

代码

CSS代码：

.box {
    width: 660px;
    margin-left: auto;
    margin-right: auto;
}
.list {
    width: 220px;
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
}
.link {
    display: block;
    text-align: center;
}
.operate {
    margin: -20px 10px 0;
    height: 20px;
    position: relative;
    overflow: hidden;
}
.delete {
    width: 200px;
    line-height: 20px;
    font-size: 12px;
    font-family: '宋体';
    text-align: center;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#76000000,endColorStr=#76000000);
    position: absolute;
}
:root .delete {
    filter: none; /* IE9+ remove */
    background-color: rgba(0,0,0,.5);
}
.delete, .delete:hover {
    color: #fff;
}

.confirm {
    display: none;
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
}
:root .confirm:after, :root .confirm:before {
    content: '▼';
    font-size: 24px;
    margin-left: -12px;
    -webkit-transform: scale(1, .5);
    -moz-transform: scale(1, .5);
    -ms-transform: scale(1, .5);
    -o-transform: scale(1, .5);
    transform: scale(1, .5);
    position: absolute;
    left: 50%;
}
.confirm:before {
    color: #bbb;
    bottom: -22px;
}
.confirm:after {
    color: #fff;
    bottom: -21px;
}
.confirm_body {
    padding: 0 25px;
    border: 1px solid #bbb;
    background-color: #fff;
}
            

HTML代码：

<ul id="box" class="box">
    <li class="list fade">
        <a href="#" class="link"><img src="//image.zhangxinxu.com/image/study/p/s200/ps1.jpg" /></a>
        <p class="operate"><a href="javascript:" class="delete slideup reverse out">删除</a></p>
    </li>
    <li class="list fade">
        <a href="#" class="link"><img src="//image.zhangxinxu.com/image/study/p/s200/ps2.jpg" /></a>
        <p class="operate"><a href="javascript:" class="delete slideup reverse out">删除</a></p>
    </li>
    <li class="list fade">
        <a href="#" class="link"><img src="//image.zhangxinxu.com/image/study/p/s200/ps3.jpg" /></a>
        <p class="operate"><a href="javascript:" class="delete slideup reverse out">删除</a></p>
    </li>
    <li class="list fade">
        <a href="#" class="link"><img src="//image.zhangxinxu.com/image/study/p/s200/ps4.jpg" /></a>
        <p class="operate"><a href="javascript:" class="delete slideup reverse out">删除</a></p>
    </li>
    <li class="list fade">
        <a href="#" class="link"><img src="//image.zhangxinxu.com/image/study/p/s200/ps5.jpg" /></a>
        <p class="operate"><a href="javascript:" class="delete slideup reverse out">删除</a></p>
    </li>
    <li class="list fade">
        <a href="#" class="link"><img src="//image.zhangxinxu.com/image/study/p/s200/ps6.jpg" /></a>
        <p class="operate"><a href="javascript:" class="delete slideup reverse out">删除</a></p>
    </li>
</ul>   

<!-- 确定删除的提示框 -->
<div id="confirm" class="confirm slideup reverse out">
	<div class="confirm_body">
    	<p>您确定删除该图片？</p>
        <p>
            <button id="ensure" type="button">确定</button>
            <button id="cancel" type="button">取消</button>
        </p>
    </div>
</div>     
            

JS代码：

// 删除按钮的显隐
$("#box .list").hover(function() {
    // slideup显示删除按钮
    $(this).find(".delete").removeClass("reverse out").addClass("in");
}, function() {
    // slidedown隐藏删除按钮
    $(this).find(".delete").addClass("reverse out").removeClass("in");
});

// 浮动提示框的元素们
var eleConfirm = $("#confirm"), eleEnsure = $("#ensure"), eleCancel = $("#cancel");
// 点击删除图片
$(".delete").bind("click", function() {
    var list = $(this).parents(".list"), offset = list.offset(), self = $(this);
    if (eleConfirm.hasClass("in")) {
        eleConfirm.addClass("reverse out").removeClass("in");
        self.trigger("click");
    } else {
        eleConfirm.css({
            display: "block",
            left: offset.left + 10,
            top: offset.top - 90
        }).removeClass("reverse out").addClass("in");
        eleEnsure.data("list", list);
    }
    return false;    
});
// 点击确定按钮
eleEnsure.bind("click", function() {
    var list = $(this).data("list");
    // 触发取消按钮点击
    eleCancel.trigger("click");
    // 列表淡出
    list.addClass("out");
    setTimeout(function() {
        // 200毫秒后列表删除
        list.remove();    
    }, 200);
    return false;    
});
// 点击取消按钮
eleCancel.bind("click", function() {
    eleConfirm.addClass("reverse out").removeClass("in");    
    setTimeout(function() {
        // 200毫秒后提示框隐藏
        eleConfirm.hide();    
    }, 200);
    return false;
});