H5+javascript+jQuery的单页面应用（SPA）（二）

已于 2022-04-04 09:10:08 修改
阅读量830 收藏 2
点赞数
文章标签： html5
于 2022-04-03 15:56:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hivesplace/article/details/123937842
版权
本文介绍了如何使用HTML5、jQuery优化单页面应用的页面过渡效果和添加用户登录页面。通过调整CSS和JavaScript，实现了顶部菜单栏的鼠标交互效果，并利用Bootstrap 4创建了登录页面。后续将展示使用jQuery AJAX实现前后端分离登录。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面优化

今天我们的工作目标有

  • 优化顶部菜单栏的鼠标悬浮和鼠标移出的效果
  • 优化页面加载和退出的过场效果
  • 利用 Bootstrap 模板，加入一个用户登录页面
顶部菜单栏鼠标效果

目前的鼠标效果
请添加图片描述
问题

  1. 鼠标移到菜单时，鼠标没有变成手指
  2. 鼠标悬浮在菜单上时，菜单颜色没有变化。用户体验不好

解决方案

  1. 在 index.css，header nav div 部分加入鼠标样式
    在这里插入图片描述
  2. 在 index.js 里分别为每个菜单加入 mouseover 和 mouseout 切换菜单样式代码
    在这里插入图片描述
    完成后菜单栏效果如下：
    请添加图片描述

优化页面加载和退出的过场效果

目前的过场效果

最低0.47元/天 解锁文章
hivesplace
关注
H5+javascript+jQuery的单页面应用（SPA）（三）
蜂窝码农的博客
04-05 4003
前言 继承上一篇博文，本篇主力演示利用 jQuery ajax 实现 SPA 的前后端分离。本例子后端为一个简单的 spring boot 项目。 前端 Ajax 创建 login.js 和 修改 Bootstrap Form 例子 为方便起见，不用每次重新加载页面后跳转到首页，我们修改 index.js 里的 defaultPage 和 defaultNavId 为 Login 及 navLoginLink（Login 页面和菜单选项） 和之前一样，为了不和主页的 javescript 混淆在一起。我们
H5+javascript+jQuery的单页面应用（SPA）（五）
蜂窝码农的博客
04-10 617
前言 本文将优化 SPA 前端页面逻辑， 登录成功后，Login 菜单转变为 Logout； 点击 Logout 后，Member 页面也要退出，还原登入前的页面内容 优化前端页面 登录后更换 Login 菜单成为 Logout 副标题 副标题 二级标题 副标题 副标题 源代码 关注我并发表不少于10字评论可以获取本文源代码。 码农经典语录 Linus Torvalds Talk is cheap, show me the code. 蜂窝码农 DRY Principle (Don’t Rep
jQuery-SPA：jQuery单页应用开发框架
02-03
jQuery-SPA 描述 基于jQuery的单页应用开发框架。 产生原因 之前在很多前端群里面发现非北上广深小伙伴在实际工作中，很多还都以jQuery作为主要技术选型，而基于jQuery的单页应用也比较少见，因此抽空将两年前我们前端用jQuery做单页应用的一些想法整理起来，一来记录一下当初我的成长经历，二来起一个抛砖引玉的作用（其实就是炒冷饭 :beaming_face_with_smiling_eyes: ）。 依赖说明 依赖的库版本 版 jQuery的 artTemplate 3.x :beaming_face_with_smiling_eyes: :beaming_face_with_smiling_eyes: 2.x :beaming_face_with_smiling_eyes: :beaming_face_with_smiling_eyes: 1.x :beaming_face_with_smiling_eyes: :beaming_face_with_smiling_eyes: 什么是artTemplate 框架内部使用artTempla
jquery spa
weixin_30426065的博客
10-19 295
1.hashchange监听 2.根据url加载不同页面 $.ajax({ url:"/xx/xx.html" type:"get", dataType:"html", }).done(function(data){ $().html(data) }) 转载于:https://www.cnblogs.com/lexiaoyao1992/p/9816901.html...
使用jquery.pjax实现SPA单页面应用
weixin_30670965的博客
02-20 345
前面文章介绍了前端路由简单实现和Pjax入门方面的文章，今天来分享一个单页面应用神器jquery.pjax.js。 HTML 我们准备一个加载div#loading,默认隐藏，ajax请求的时候才显示。#container是用来加载响应的页面内容。.pagination是分页条组件。 <div class="row"> <div id="loading">...
H5+javascript+jQuery的单页面应用（SPA）（一）
蜂窝码农的博客
04-03 1890
前言 为了和新同事在前端开发工作上能沟通，新学了Vue-CLI，导致笔者写了上一篇博文吐槽Vue，AngularJS和ReactJS等所谓的前端框架。作为IT技术员，口水吐得再多、理论再多，也比不上来一段代码证明好。正如Linuz所说： Talk is cheap，show me the code 好了，直接上代码！ 简单优越的H5+javascript+jQuery SPA 新建项目和index.html 首先先在VS Code里创建一个新的文件夹，再新建一个index.html文档。利用VS Cod
H5+javascript+jQuery的单页面应用（SPA）（四）
蜂窝码农的博客
04-07 1850
前言 上一篇博文，H5+javascript+jQuery的单页面应用（SPA）（三），为了更好的讲解主线内容，我们写死了用户名称和密码。现实环境下中，用户名和密码一般都保存在数据库里。 本文会以 Spring Data JPA + Hibernate + MySQL 演示，通过查询数据库验证用户输入的用户名和密码。 加入 Maven 库依赖 <dependency> <groupId>org.springframework.boot</groupId> <ar
require.js实现单页web应用（SPA）
少吃点肉的博客
12-22 5404
移动端单页应用基本上是做移动端最流行的的方式了，但是对于很多前端来说，可能仅仅只会一个jquery,而利用jquery实现单页应用会让人痛不欲生。也有人选择使用原生js实现单页应用，但是这样做的方法也是非常笨拙。当下最流行的单页应用无疑是用路由完成，比如angular,react,vue等，都带有其路由组件，方便好用。但是这些技术，很多前端是没有接触过，也没时间学。所以，我就给大家带来了超级简单实用
基于jQuery/zepto的单页应用(SPA)搭建方案
weixin_30784141的博客
03-26 321
这里介绍一个基于jquery或zepto的单页面应用方案，遵循尽可能简单的原则，使大家一目了然，只需配置一个路由，之后完全按照jq日常写法即可完成。可做学习使用，也可修改后用于一些业务逻辑简单的spa项目中;下面是个dome，先看下效果(放在github page下，可能访问比较慢,若无法查看刷新几下既可以了)： 项目地址：https://github.com/pangyongsheng...
Ajax-jquery-spa.zip
09-17
Ajax-jquery-spa.zip,轻松地将任何standart网站转换为单页应用程序,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
jQuerySpa:基于Asp.net Core中简单jQuery单页应用程序（SPA）的渐进式Web应用程序（PWA）
05-14
jQuerySPA-PWA 我已经简单地使用基于Asp.net Core的jQuery编写了单页应用程序（SPA）。 不需要其他框架或库（不需要Angular，不需要React，不需要Vue.js ...） 因此，我使用WebEssentials.AspNetCore.PWA将SPA转换为PWA SPA的实施受到本文的启发： :
jTable:简单的jQuery SPA
05-07
表格 jQuery简单表 大家好 ：） 这个带有节点js＆jquery的应用程序显示带有服务器响应数据的简单表。 如果要启动这个简单的应用程序，首先需要： -在您的PC上安装npm和nodejs。 -克隆项目 在终端中点击命令：cd <PROJECT> cd jTable npm install节点应用 在浏览器中打开“ localhost：4004 / data”。
jquery单页网站导航插件One Page Nav
07-06
一个轻量级的jQuery的单页网站导航插件。增加了单击后平滑滚动导航和当你浏览不同的部分时自动选择正确的导航项。演示地址：http://www.jq22.com/jquery-info497
jquery-spa-sample:仅使用jQuery创建单页应用程序
05-09
jquery-spa-sample 故事。 概述 让我们用jQuery创建一个单页应用程序。 如何尝试 仅第一次npm install 。 那些使用webpack的人 > npm install > cd with-webpack > npm run dev 那些不使用webpack的人 > npm install > cd only-jquery > npm run dev 或者 > gulp with-webpack 或者 > gulp only-jquery 但是您可以直接调用它。 创作环境 Windows 7家庭高级版64位Node.js v0.12.7
移动端H5单页面跟随手指滑动切换组件PageSlider
weixin_33739646的博客
07-15 451
2019独角兽企业重金招聘Python工程师标准>>> ...
Ember.js的一些学习总结
weixin_34220834的博客
04-29 275
1.1.1 摘要 现在，我们经常都可以看到复杂的JavaScript应用程序，由于这些应用程序变得越来越复杂，一长串的jQuery回调语句或者通过应用程序在各个状态执行不同的函数调用，这些做法都会变得无法再让人接受，这导致了JavaScript开发人员开始寻找一种组织和效率更优秀的开发方式。 实现组织和效率的其中一个最常用的架构模式，就是我们熟知的Model View Controller （...
用jq写项目js代码凌乱以及单页面问题
weixin_38267121的博客
07-15 1620
    最近接到一个公司的小产品，技术要求是jq单页面切换，对于我这个两年没怎么碰jq的人来说还是挺头疼。因为之前代码都是用react来写，所以基本代码的流程跟文件结构都是相对清晰的。但jq总体给人写完就是凌乱不堪就跟古代的裹脚布一样。    首先定义js文件的时候，我定义了三个文件，一个帮助类（help.js）主要放自己封装的一些弹窗，路由，日期处理，正则表达式等等，然后用构造对象封装成Help...
Vue+jQuery开发仿饿了么点餐静态页面教程
它允许开发者以数据驱动的方式构建复杂的单页应用（SPA）。在该项目中，Vue可能被用来： - 管理商品列表和购物车的状态。 - 处理商品数量的加减和购物车数量的增加。 - 实现响应式的数据绑定，确保界面和数据同步...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值