【热门主题】000002 案例 JavaScript网页设计案例

宝码香车

于 2024-09-29 15:46:17 发布

阅读量461

点赞数 8

分类专栏：热门主题文章标签： javascript

本文链接：https://blog.csdn.net/qq_33650655/article/details/142635632

版权

热门主题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

【热门主题】000002 案例 JavaScript网页设计案例

使用的库：

Jquery库CDN：

    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

Jquery的库Jquery UI CDN：

    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

📚一、效果

📚二、核心解析

💡1.给要点击的div元素，增加一个点击后的css类 big-blue：

引入bootstrap.css库，并命名一个别名 bootstrapCss

        div {
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
        .big-blue {
            width: 200px;
            height: 200px;
            background-color: #00f;
        }

💡2.当点击时，执行Jquery的addClass方法：

addClass方法


<script>
  $( "div" ).click(function() {
    $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
  });
</script>

💡3.注意：

扩展自 jQuery 内置的 .addClass() 方法。如果jQuery UI 未加载，调用 .addClass() 方法不会直接失败，因为该方法在 jQuery 中存在。但是不会发生预期的行为。
与原生的 CSS 过渡相似，jQuery UI 的 class 动画提供了一个平稳的从一个状态转换到另一个状态的过渡，同时确保所有样式变化的细节是通过 CSS 来完成的，而不需要使用 JavaScript。所有的 class 动画方法，包括 .addClass()，允许自定义动画持续时间和 easing 函数，在动画完成时也提供了一个回调。

并非所有的样式都可以进行动画添加。例如，对背景图像进行动画化。任何不能动画化的样式都将在动画的结尾改变。

📚三、完整源代码，可以直接复制使用

✍️HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>.addClass() 演示</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
        .big-blue {
            width: 200px;
            height: 200px;
            background-color: #00f;
        }
    </style>
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<div></div>

<script>
  $( "div" ).click(function() {
    $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
  });
</script>

</body>
</html>