案例:卷帘门的滑入滑出

最新推荐文章于 2025-03-06 10:12:18 发布

原创最新推荐文章于 2025-03-06 10:12:18 发布 · 477 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#卷帘门的滑入滑出

五.JQuery 专栏收录该内容

4 篇文章

订阅专栏

效果: 在这里插入图片描述
如果用JQ来做,其实非常简单,核心代码:

<script src="jquery-1.12.4.js"></script>
<script>
    //jq入口函数简写方法
/*    $(function ( ) {

    })*/
 //jq入口函数普通方式
$(document).ready(function ( ) {
    $('#flip').on('click',function ( ) {
        $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不写默认normal
    })
})
</script>

完整的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #flip,#content {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: 1px solid #c3c3c3;
        }
        #content {
            padding: 100px;
            display: none;
        }
        #flip {
            cursor: pointer;
        }

    </style>
</head>
<body>
<div id="flip">点我,显示或隐藏面版</div>
<div id="content">hello world!</div>

<script src="jquery-1.12.4.js"></script>
<script>
    //jq入口函数简写方法
/*    $(function ( ) {

    })*/
 //jq入口函数普通方式
$(document).ready(function ( ) {
    $('#flip').on('click',function ( ) {
        $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不写默认normal
    })
})
</script>

</body>
</html>