使用jquery+aos.js+ajax搭建一个兼容IE8的web官网项目
创建项目
新建一个website空文件夹并在此中添加目录
目录结构
|-- src // 源码目录
| |-- public // 公用文件夹
| |-- js // 公共JS目录
| |-- css // 公共CSS目录
| |-- pages // 页面文件夹
| |-- index // 主页面文件夹
|-- static //静态资源文件夹
在pages>index目录下新建一个index.html，引入框架组件
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>众能联合租赁title><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"><link rel="stylesheet" href="../../public/aos_1.css" type="text/css"><link rel="stylesheet" href="index.css" type="text/css">
head>
<body>body><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">script><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">script>
实现导航栏固定，内容页面刷新
- 在index.html文件中编写导航栏及其他公共组件
- 在页面中部添加一个空白div标签，并添加id名
<div id="iframe-content">div>
- 编写其他页面文件
- 导航栏a链接添加target属性，值为页面路径
<ul id="menu"><li class="active"><a taraget="../home/home.html">a>li><li><a target="../news/news.html">a>li>ul>
- 初始化页面
$(function).ready(function(){$.get('../home/home.html',function(data){$("#iframe-content").html(data);//初始化加载首页})})
- 添加点击事件
$("#menu li").click(function(){var current = $(this);var target = current.find('a').attr('target');//找到链接中target的值//跳转$.get(target,function(data){$("#iframe-content").html(data)});//激活navcurrent.siblings().removeClass('active');current.addClass('active');)
通过改变document节点实现nav切换时需注意，css及js文件放在主页面引用才能生效
使用aos.js
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。
- 引入aos.js文件或通过 npm 安装
npm install aos --save
- 在js文件中初始化AOS
AOS.init();
- 在元素上使用
<div data-aos="animation_name">div>
"animation_name"为动画效果名，可点击此处查看演示效果进行选择设置,aos脚本将会在页面滚动时，在该元素上触发动画。
- 元素上还可以添加以下属性：
| 属性 | 属性 | 默认值 |
|---|---|---|
| aos-offset | 是立刻触发动画还是在指定时间之后触发动画 | 120 |
| aos-duration | 动画持续时间 | 400 |
| aos-easing | 动画easing动画效果 | ease |
| aos-delay | 动画的延迟时间 | 0 |
| aos-anchor | 锚元素，使用它的偏移来取代实际u安速达偏移来触发动画效果 | #selectior |
| aos-anchor-placement | 锚位置，触发动画时元素位于屏幕的位置 | top-centent |
| aos-once | 动画是否会触发一次，或者每次上下滚动都会触发 | true |
*注意：aos-duration的动画持续时间的范围为50-3000毫秒，如果想设置更大的值，可以再页面中添加下面的css代码：
body[aos-duration='4000'][aos],[aos][aos][aos-duration='4000']{transition-duration:4000ms; //动画持续时间修改为4000毫秒}
注意双重[data-aos] [data-aos] 不是一个错误，而是一个技巧，使个人设置比全局更重要，而不需要设置！ important。
data-aos-anchor-placement 可以自每个元素上设置不同的放置选项，原理很简单，每个锚点放置选项包含两个单词，即top-center。这意味当元素顶部达到窗口中心时触发动画，bottom-top表示当元素底部到达窗口中心时将触发动画，依次类推。所有锚定位会在下方列出。
- HTML5可能存在校验问题，可以通过为上面属性添加data-前缀来解决。
<div data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-in-sine">div>
- 如果不想单独给每个元素做一个动画配置，可以通过init()方法来同意配置所有元素的动画效果
AOS.init({offset:200,duration:600,easing:'ease-in-sine',delay:100,})
- AOS对象作为全局变量公开，目前有三种方法可用：
init：初始化AOS
refresh：重新计算元素的所有偏移和位置（在窗口调整大小时调用）
refreshHard：使用AOS元素和触发器重新启动数组refresh（调用与AOS元素相关的DOM更改）
AOS.refreshHard.()
默认情况下，AOS会监听DOM的更改，如果异步加载了任何新元素，或者当从DOM中删除某些元素时，他会自动调用refreshHard，IE浏览器可能需要手动调用AOS.refreshHard。
- AOS提供了两个额外的配置方法，这些方法只能够在初始化时使用。
| 配置 | 描述 | 示例值 | 默认值 |
|---|---|---|---|
| disable | AOS被禁用的条件 | mobile | false |
| startEvent | AOS被初始化的事件名称 | exampleEvent | DOMContentLoaded |
- 禁用AOS：
如果你想在小屏幕设备中禁用AOS，可以：
AOS.init({disable:'mobile'})
可以传入三种设备类型：mobile、phone、tablet。可以设置自己的禁用条件。
disable:window.innerWidth < 1024; //屏幕小于1024像素时禁用AOS
也可以传入一个函数，返回true或false。
disable:function(){var maxWidth = 1024;return window.innerWidth < maxWidth;}
- 动态触发
如果不想从页面加载（DOMContentLoaded）后就开始执行滚动动画，可以使用startEvent来设置自己的事件，AOS会在documnet上监听这个事件：
AOS.init({startEvent:'someCoolEvent'})
*如果设置startEvent:'load'它将在window上而不是document上添加监听事件。
动画
-
淡入淡出动画
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left -
翻转动画：
flip-up
flip-down
flip-left
flip-right -
滑动动画：
slide-up
slide-down
slide-left
slide-right -
缩放动画：
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right -
锚位置
top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top
easing动画 -
可以使用以下的一些easing动画效果：
linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart
AJAX 请求封装
- 创建http.js封装 ajax请求
- 封装ajax请求
var baseURL = "http://api.xxx.com"; //接口请求地址前部分function baseAjax(path,data,type,success,error,dataType){/*path:接口请求地址拼接部分data:参数type:请求参数success:成功回调error:失败回调dataType:返回路径类型*///设置默认参数data = data || {};type = type || 'GET';dataType = dataType || 'JSON';$.ajax({url:baseURL+path,data:data,timeout:10000,beforeSend:function(){//发送请求前的操作},success:function(res){//请求成功操作if(res.message == 'ok'){//.message、ok 是与后台约定的参数、参数值，根据实际情况写入判断条件if(success){success(res.data) //成功后，将返回的数据res.data传入该回调函数}}else{//失败提示}},error:function(){//请求失败后进行的操作}})}
- 再次封装上方请求方法
function post(path,data,success,error){baseAjax(path,data,'POST',success,error)}function get(path,data,success,error){baseAjax(path,data,'GET',success,error)}
- 创建api.js，将地址放入其中
function api(){return{testGet:'/api-xxx/api/test',testPost:'/api-xxx/api/post',}}
- 使用
- 在index.js中引入http.js、api.js
http_element=document.createElement("script");http_element.setAttribute("type","text/javascript");http_element.setAttribute("src","../../public/http.js");//引入http.jsapi_element=document.createElement("script");api_element.setAttribute("type","text/javascript");api_element.setAttribute("src","../../public/http.js");//引入api.jsdocument.body.appendChild(http_element);document.body.appendChild(api_element);//使用var app = app();get(api.testGet,{},function(res){console.log(res);},function(){console.log("请求失败！")});post(api.testPost,{},function(res){console.log("提交成功");},function(){console.log("提交失败！")});
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！