记录一次公司官网改版的开发过程（静态页面）技术栈：html + css + jquery + bootstrap主要使用
技术栈：html + css + jquery + bootstrap
主要使用html+css实现静态布局，除此之外，就是jQuery对元素进行增删改，或者对元素属性进行增删改。
顶部导航header.html和底部页脚footer.html做成公共页面，通过jQuery的load方法，在各个页面加载。
<!-- header -->
<div class="headerpage"></div>
<!-- footer -->
<div class="footerpage"></div>
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
jQuery是JavaScript的一个轻量级工具库，基于jQuery又可以封装一些插件。
Owl Carousel
譬如，Owl Carousel 就是一个强大、实用但小巧的 jQuery 幻灯片插件。
Owl Carousel翻译过来，中文叫做，猫头鹰旋转木马。感觉一篇小说的题目已经起好了。
Owl Carousel官网
owlcarousel2.github.io/OwlCarousel…
项目代码片段
var owl = $('.honor-box >.slide-box > .box-list');
owl.owlCarousel({
items: 5,
stopOnHover: false,
autoPlay: true,
rewindNav: false,
// itemsDesktop
// 设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，
// 如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false
// itemsDesktop: [1199, 3],
// itemsDesktopSmall: [979, 3]
});
$('#page-left').click(function (event) {
owl.trigger('owl.prev');
});
$('#page-right').click(function (event) {
owl.trigger('owl.next');
});
轮播图carousel插件
首页轮播图，使用bootstrap轮播图carousel插件
关于carousel插件的使用，博客园相关文章如下
runboob上也有详细讲解，都是基础知识，在此不做赘述
引入 bootsrap
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
首页轮播图
<!-- 首页轮播图 -->
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
<li data-target="#myCarousel" data-slide-to="1">2</li>
<li data-target="#myCarousel" data-slide-to="2">3</li>
<li data-target="#myCarousel" data-slide-to="3">4</li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/banner/0.jpg" alt="">
</div>
<div class="item">
<img src="images/banner/1.jpg" alt="">
</div>
<div class="item">
<img src="images/banner/2.jpg" alt="">
</div>
<div class="item">
<img src="images/banner/3.jpg" alt="">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
列表分页插件pagination.js
关于列表数据分页的功能，有一款分页的插件pagination.js
Pagination.js官网：
码云上也有不错的开源插件
gitee地址
查看效果
liverwang.github.io/Pagination/…
引入
<link rel="stylesheet" href="pagination/pagination.css">
<script src="pagination/pagination.js"></script>
翻页代码片段
<div class="page-box flex">
<div class="page-container"></div>
</div>
const pageSize = 9 // 默认页码大小
const dataCount = 95 // 测试数据数量
const pager = new Pagination('.page-container', {
pageSize: pageSize,
autoLoad: true,
unit: '条',
toPage: function (index, _pageSize) {
// 设置记录总数，用于生成分页HTML内容
if (index === 0 || _pageSize) this.updateCount(dataCount, _pageSize)
console.log(index)
console.log(_pageSize)
// 根据页码以及分页大小生成html内容
let pageListHtml = ''
for (var i = 0; i < (_pageSize || pageSize); i++) {
pageListHtml += `
<div class="list-item">
<div class="content">
<div class="img">
<img src="images/banner/0.jpg" alt="">
</div>
<div class="text">
<div class="text-title">中国医科大学</div>
<div class="text-remark">可信电子凭证服务平台</div>
</div>
</div>
<div class="shadow">
<div class="img">
<img src="images/right/qq.png" alt="">
</div>
<div class="text-title">中国医科大学</div>
<div class="text-remark">综合档案管理系统</div>
<div class="btn">立即查看</div>
</div>
</div>
`
}
$('.home-case > .box-list').html(pageListHtml)
}
})
百度地图API
显示公司地址的时候，还用到了百度地图API功能
引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eqKGkoLE5OpERsnsleWQaPGLZSDtbUOy"></script>
代码片段
// 百度地图API功能
const map = new BMap.Map("allmap"); // 创建Map实例
// 经度
let longt = 112.893378;
// 纬度
let lat = 28.216315;
map.centerAndZoom(new BMap.Point(longt, lat), 1200);
map.enableScrollWheelZoom(false); //鼠标滚轮缩放
//设置标注的经纬度
const marker = new BMap.Marker(new BMap.Point(112.896626, 28.214921));
//把标注添加到地图上
map.addOverlay(marker);
目前阶段，还是只是静态页面布局，没有联调接口。接口请求数据，接口开发完成之后，我会封装一下jQuery自带的ajax请求方法。
除此之外，就是页面交互动画。既可以用jQuery的animate方法，也可以用css3的变形和动画相关属性transform、transition和animation来做。
css3 animation 与 jquer animate()区别在于实现机制不同。
1.css3中的过渡和animation动画都是基于css实现机制的，属于css范畴之内，并没有涉及任何语言操作。效率略高于jQuery中的animate()函数，但兼容性很差。
2.jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”，是css样式不同主题的快速切换的结果。效率略低于css3动画执行效率，但是兼容性好。
css3的animation
animation相关文档如下：
developer.mozilla.org/zh-CN/docs/…
譬如，鼠标移上去，图标呼吸灯的效果，也就是图片缩小，再还原。就是用animation来做。
样式如下
@keyframes breathe {
0% {
transform: scale(1.0);
}
25% {
transform: scale(0.95);
}
50% {
transform: scale(0.9);
}
75% {
transform: scale(0.95);
}
100% {
transform: scale(1.0);
}
}
.side ul li .sidebox:hover>img {
animation: breathe 1s linear infinite;
animation-name: breathe;
animation-duration: 1s;
/* linear 动画从头到尾的速度是相同的 */
animation-timing-function: linear;
/* infinite 循环播放动画 */
animation-iteration-count: 1;
}
jQuery的animate
animate文档地址如下
jquery.cuishifeng.cn/animate.htm…
当滚动条向下滚动，直到某个元素出现时，图片依次出现。
这里用到了jQuery的animate方法
<script>
$(function () {
/*公共部分
* 导航栏
* footer CopyRight
*/
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
const height = $("#ready-panel").offset().top;
$(window).scroll(function () {
const this_scrollTop = $(this).scrollTop();
if (this_scrollTop > height) {
showPanelItem();
}
});
});
function showPanelItem(index) {
if (!index) index = 0;
const count = 15;
$('#step_' + index).animate({ 'opacity': 1 }, 800, 'swing', () => {
if (index < count) {
index++;
showPanelItem(index)
}
});
}
</script>
以前，我做iptv+web专题的时候，主要用的就是html + css + jQuery这三板斧，不像现在用的是angular和vue框架。很久没有用纯html和jQuery来做项目了。
这里，只是记录一下公司官网静态页面的开发过程，以及用到的东西。过一段时间，自己回头来看，或许会觉得有点意思。如果，碰巧对你有点帮助，更是我莫大的荣幸。
转载自:https://juejin.cn/post/6950910023300022280