jquery左右折叠框

最新推荐文章于 2023-08-02 10:16:43 发布

acac242083

最新推荐文章于 2023-08-02 10:16:43 发布

阅读量389

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/LLMjiayou7/p/7873676.html

版权

网站左右折叠框：

<!DOCTYPE html>
<html>
<style>
#Kefclose,#Kefopen{position:absolute;left:-32px;top: 35%;display:block;width:32px;height: 100px;border-radius:15px 0 0 15px}
#Kefclose{background:url(../images/cclose.png) no-repeat center center #eee;background-size:20px;}
#Kefopen{background:url(../images/oopen.png) no-repeat center center #eee;background-size:20px;}
#Kefopen{display:none;}
</style>
<body>
<div id="online_qq_layer">
    <a href="javascript:;" id="Kefclose"></a>
    <a href="javascript:;" id="Kefopen"></a>
  </div>
<script>
    $(dunction(){
        $("#Kefclose").click(function () {
            $("#online_qq_layer").animate({
                marginRight:"-144px"
            
            }, "slow",function(){
                $("#Kefclose").hide();
                $("#Kefopen").show();
            });
           
        });
        $("#Kefopen").click(function () {
            $("#online_qq_layer").animate({
                marginRight:"-4px",
                
                display:"block"

            }, "slow", function () {
                $("#Kefopen").hide();
                $("#Kefclose").show();
            });

        });
    });
</script>
</body>
</html>

效果：

转载于:https://www.cnblogs.com/LLMjiayou7/p/7873676.html

acac242083

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery左右折叠框

网站左右折叠框：<!DOCTYPEhtml><html><style>#Kefclose,#Kefopen{position:absolute;left:-32px;top: 35%;display:block;width:32px;height: 100px;border-radius:15px 0 0 15px}#Kefc...
复制链接

扫一扫