Technology stack: HTML + CSS + jquery + Bootstrap
Static layout using HTML + CSS. In addition, jQuery can add, delete, change elements or add, delete, change element attributes.
The top navigation header. HTML and the bottom footer footer. HTML are made into public pages and loaded in each page using jQuery load method.
<! -- header -->
<div class="headerpage"></div>
<! -- footer -->
<div class="footerpage"></div>
Copy the code $(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
Copy the codeJQuery is a lightweight JavaScript library that encapsulates plugins.
Owl Carousel
Owl Carousel, for example, is a powerful and useful but small jQuery slideshow plug-in.
Owl Carousel translates to Owl Carousel in Chinese. I feel like THE title of a novel has been written.
The Owl Carousel’s official website
Owlcarousel2. Making. IO/OwlCarousel…
Project snippet
var owl = $('.honor-box >.slide-box > .box-list');
owl.owlCarousel({
items: 5.stopOnHover: false.autoPlay: true.rewindNav: false.// itemsDesktop
// Set the browser width and the number of slides visible in the format [X,Y], X is the browser width,Y is the number of slides visible,
[1199,4] displays 4 pages per page if the browser width is less than 1199. This parameter is mainly used for responsive design. You can also use 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');
});
Copy the codeCarousel plugin for carousel
Home page carousel, using bootstrap carousel plug-in
The following is a blog post about the carousel plugin
www.cnblogs.com/cui-ting/p/…
Runboob also explains the basics in detail, so I won’t repeat them here
www.runoob.com/bootstrap4/…
The introduction of bootsrap
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
Copy the codeHome page round broadcast map
<! -- Home page round-robin map -->
<div id="myCarousel" class="carousel slide">
<! -- Carousel index -->
<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 Project -->
<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 navigation -->
<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>
Copy the codeList pagination plugin pagination.js
For pagination of list data, there is a plugin called pagination.js
Pagination. Js’s official website:
pagination.js.org/
There are also good open source plug-ins on the code cloud
Gitee address
Gitee.com/mirrors/Pag…
See the effect
Liverwang. Making. IO/Pagination /…
The introduction of
<link rel="stylesheet" href="pagination/pagination.css">
<script src="pagination/pagination.js"></script>
Copy the codeFlip through code snippets
<div class="page-box flex">
<div class="page-container"></div>
</div>
Copy the codeconst pageSize = 9 // Default page size
const dataCount = 95 // Test the number of data
const pager = new Pagination('.page-container', {
pageSize: pageSize,
autoLoad: true.unit: '条'.toPage: function (index, _pageSize) {
// Sets the total number of records used to generate paged HTML content
if (index === 0 || _pageSize) this.updateCount(dataCount, _pageSize)
console.log(index)
console.log(_pageSize)
// Generate HTML content based on page number and page size
let pageListHtml = ' '
for (var i = 0; i < (_pageSize || pageSize); i++) {
pageListHtml += `
China Medical University
Trusted electronic voucher service platform
Integrated file management system
Immediately check
'
}
$('.home-case > .box-list').html(pageListHtml)
}
})
Copy the code
Baidu Map API
The Baidu Map API is also used to display the company’s address
The introduction of
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eqKGkoLE5OpERsnsleWQaPGLZSDtbUOy"></script>
Copy the codeCode snippet
// Baidu Map API function
const map = new BMap.Map("allmap"); // Create a Map instance
/ / longitude
let longt = 112.893378;
/ / latitude
let lat = 28.216315;
map.centerAndZoom(new BMap.Point(longt, lat), 1200);
map.enableScrollWheelZoom(false); // Mouse wheel zoom
// Set the latitude and longitude of the annotation
const marker = new BMap.Marker(new BMap.Point(112.896626.28.214921));
// Add annotations to the map
map.addOverlay(marker);
Copy the codeAt present, it is only static page layout, no tuning interface. After the interface is developed, I will encapsulate jQuery’s own Ajax request methods.
In addition, is the page interactive animation. You can use jQuery’s animate method or cSS3’s transform and animation properties transform, Transition, and animation.
Css3 Animation differs from Jquer animate() in its implementation mechanism.
1. The transition and animation in CSS3 are based on THE IMPLEMENTATION mechanism of CSS, which falls within the scope of CSS and does not involve any language operations. Slightly more efficient than the animate() function in jQuery, but less compatible.
2. The animate() function in jQuery is simply known as “frame by frame animation” of CSS styles. It is the result of quick switching between different themes of CSS styles. Slightly less efficient than CSS3 animation execution efficiency, but good compatibility.
Most of the animation
Related documents of Animation are as follows:
Developer.mozilla.org/zh-CN/docs/…
For example, mouse up, icon breathing light effect, that is, the picture is reduced, and then restore. I’m just going to do it with animation.
The style is as follows
@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 has the same speed from beginning to end */
animation-timing-function: linear;
/* Infinite plays animation */
animation-iteration-count: 1;
}
Copy the codeJQuery animate
The animate document address is as follows
Jquery. Cuishifeng. Cn/animate. HTM…
When the scroll bar scrolls down until an element appears, the images appear in sequence.
JQuery’s animate method is used here
<script>
$(function () {
/* Public section * navigation * 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>
Copy the codeIn my previous IPTV + Web projects, I used HTML + CSS + jQuery instead of angular and Vue. It’s been a long time since we did a project with pure HTML and jQuery.
Here, just record the company’s official website static page development process, and the things used. After a period of time, I will look back on it and maybe feel a little interesting. If, by any chance, I could be of any help to you, it would be a great honor.