jQuery按钮点击loading加载.zip资源-CSDN文库

共10个文件

css：2个

js：2个

eot：1个

版权申诉

javascript

jQuery

html5

171 浏览量 2022-11-19 19:49:35 上传评论收藏 361KB ZIP 举报

在前端开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。在本项目"jQuery按钮点击loading加载.zip"中，主要涉及的是如何在用户点击按钮时显示一个loading动画，以提供更好的用户体验，让用户知道系统正在处理他们的请求。这通常涉及到CSS（层叠样式表）来设计loading动画，JavaScript（尤其是jQuery）来控制其显示和隐藏，以及HTML5用于构建基本的页面结构。让我们讨论HTML5部分。在页面中，你需要有一个按钮元素和一个用于显示loading动画的元素。例如： ```html <button id="myButton">点击我</button> <div id="loading" class="hidden">加载中...</div> ``` 这里，`id`属性用于jQuery选择器，`class="hidden"`是初始状态，表示loading是隐藏的。接着，我们转向CSS。为了创建一个简单的loading效果，可以使用关键帧动画（@keyframes）： ```css #loading { display: none; /* 隐藏loading，当需要显示时通过JS改变 */ text-align: center; margin-top: 20px; } .loading-spinner { width: 30px; height: 30px; border: 3px solid #ccc; border-radius: 50%; border-left-color: #3498db; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } ``` 这段CSS定义了一个旋转的loading图标。`.loading-spinner`类应用在内联元素上，如`<span>`，以显示旋转的加载效果。我们使用jQuery来处理按钮点击事件并控制loading的显示与隐藏： ```javascript $(document).ready(function() { $('#myButton').on('click', function() { $('#loading').removeClass('hidden').addClass('show'); // 这里添加实际处理请求的代码，例如Ajax setTimeout(function() { // 模拟延迟，实际应用中应替换为请求完成后的回调 $('#loading').removeClass('show').addClass('hidden'); }, 2000); // 假设请求需要2秒完成 }); }); ``` 在这段代码中，`$(document).ready()`确保DOM加载完毕后再执行绑定事件。当按钮被点击时，`$('#loading')`的`hidden`类被移除并添加`show`类，使loading可见。然后进行实际的请求处理（这里用`setTimeout`模拟）。请求完成后，再次隐藏loading。总结来说，这个项目展示了如何使用jQuery、CSS和HTML5协同工作，实现用户点击按钮时的loading效果。这种功能在网页应用中非常常见，能有效提升用户体验，尤其是在处理耗时操作时。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery按钮点击loading加载.zip （10个子文件）

jQuery按钮点击loading加载

jiaoben1598

css

fonts

icomoon.woff 89KB

icomoon.svg 344KB

icomoon.eot 66KB

icomoon.ttf 66KB

loda-button.css 2KB

style.css 28KB

index.html 3KB

loda-button.js 1KB

jquery-1.9.1.js 262KB

jQuery按钮点击loading加载.jpg 26KB

<!DOCTYPE html> <html> <head> <title>jQuery按钮点击loading加载 - 网页模板</title> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/loda-button.css" /> <style type="text/css"> body { font-size: 100%; margin: 1em 5em 5em; font-family: 'Lucida Grande', sans-serif; text-align: center; } h1 { margin-top: 1.2em; margin-bottom: 0; padding-bottom: 0; } h2 { font-size: 1em; color: #888; margin: 0 0 4em; padding: 0; } .logo { margin-top: 0; } .logo a, .logo a:link, .logo a:visited { color: #aaa; font-size: .4em; font-weight: normal; text-decoration: none; text-transform: uppercase; letter-spacing: 1em; transition: all .5s; } .logo a:hover { color: #000; } .loda-btn { margin: 0 2em 2em 0; } .container { max-width: 50em; margin: 0 auto; } </style> </head> <body> <br> <div class="container"> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-lock"></span> Lock </a> <a href = "#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-drawer"></span> Archive </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-upload"></span> Upload </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-download"></span> Download </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-connection"></span> Connect </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-user"></span> User </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-search"></span> Search </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-phone"></span> Phone </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-star"></span> Star </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-remove"></span> Remove </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-mail"></span> Mail </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-flickr"></span> Flickr </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-share"></span> Share </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-file-pdf"></span> PDF </a> <a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-disk"></span> Save </a> </div> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/loda-button.js"></script> <script type="text/javascript"> $('.loda-btn') .lodaButton() .click(function(e) { e.preventDefault(); var _self = $(this); _self.lodaButton('start'); setTimeout(function() { _self.lodaButton('stop'); }, 2000); }); </script> <div style="text-align:center;clear:both"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、世界之窗。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉