Question

jquery中点击右下角的图标，然后小图片跑出来。用open和close控制点击

Answer 1

写了一个小例子给你看看，你就明白了。

html如下：

<div class="demo">
    <a class="open" href="#">这里是小图标</a>
    <div class="img">
        <h2>这个是小图片，自己定义样式</h2>
        <a class="close" href="#">X</a>
    </div>
</div>

css如下：

.demo{position: fixed;right: 0;bottom: 0;}
.open{width: 150px;height: 30px;line-height: 30px;;background: #00ca57;color: #fff;text-align: center;display: block;position: absolute;right: 10px;bottom: 10px;z-index: 1;text-decoration: none;}
.img{width: 300px;height: 300px;background: #28a4c9;position: absolute;right: 10px;bottom: -300px;z-index: 2;color: #fff;text-align: center;}
.img h2{font-size: 20px;color: #fff;line-height: 300px;}
.close{position: absolute;right: 10px;top: 10px;width: 30px;height: 30px;display: block;text-decoration: none;color: #fff;}

jquery如下：

$(".open" ).click(function(){
    $(".img" ).animate({bottom:"10px"});
    return false;
});
$(".close" ).click(function(){
    $(".img" ).animate({bottom:"-300px"});
    return false;
});

完美实现，请采纳~！当然，关于css部分自己定义，图片自己插入即可！

Answer 2

功能实现起来挺好实现的