jQuery+jQuery UI库的使用

最新推荐文章于 2024-07-15 11:37:03 发布

xiantouxu

最新推荐文章于 2024-07-15 11:37:03 发布

阅读量683

点赞数

分类专栏： javascript 文章标签： jquery jquery ui

本文链接：https://blog.csdn.net/xiantouxu/article/details/77504654

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

jQuery+jQuery UI库的使用

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="math.js | basic usage">
  <title>jQuery 扩展</title>
  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #extra{
        width: 600px;
        height: 200px;
        background-color: floralwhite;
        padding: 10px;
        margin-bottom: 20px;
    }
    #message{
        width: 600px;
        height: 200px;
        background-color: floralwhite;
        padding: 10px;
        margin-bottom: 20px;
        -webkit-transition:width 2s,height 2s,background-color 2s;
        -webkit-transform: 2s;
        transition: width 2s,height 2s,transform 2s;
    }
    #message:hover{
        -webkit-transform:scale(0);
        transform: scale(0);
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<!-- 生成文字快捷方式Lorem60,即Lorem+想要生成的长度，然后呢按tab键 -->
<div id="extra" style="display:none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorum aut vitae magnam obcaecati nemo distinctio porro, ducimus harum, eligendi in nesciunt accusamus consequatur inventore voluptates, ipsum et facere aliquam velit sint aspernatur dicta possimus ut! Ratione voluptatem inventore qui, quae. Vel eligendi sapiente rerum dicta impedit. Aperiam facere, quidem molestiae, architecto, voluptate assumenda mollitia soluta fuga maiores aliquam eum.</div>
<button id="chioce">Show additional info</button>
<div id="message">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis consectetur totam, corrupti voluptate tempore, unde ea ut dicta debitis pariatur, eligendi eum repellendus id omnis facere dolorem perferendis, ullam praesentium in voluptas a quam animi eos. Atque voluptate, ipsa beatae. Culpa veniam, fuga nostrum. Beatae accusantium hic modi et nesciunt. Nisi voluptatibus provident, aliquid natus ut fugiat animi. Beatae qui praesentium officiis aliquam omnis in inventore earum magnam ad ea!</div>
<script>
$("#chioce").click(function(event) {
    /* Act on the event */
    $("#extra").toggle("fold",{horizFirst:true});
});

  </script>
</body>
</html>