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

news2024/11/18 17:52:13

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

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

csdngif标识

【热门主题】000002 案例 JavaScript网页设计案例
使用的库：
- Jquery库CDN：
- Jquery的库Jquery UI CDN：
📚一、效果
📚二、核心解析
- 💡1.给要点击的div元素，增加一个点击后的css类 big-blue：
- 💡2.当点击时，执行Jquery的addClass方法：
- 💡3.注意：
📚三、完整源代码，可以直接复制使用
- ✍️HTML

📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋1️⃣2️⃣3️⃣

【热门主题】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>