thebigsize
MasterCorporal
- Tham gia
- 04/03/2015
- Bài viết
- 327
- Được Like
- 250
Mình thấy có vài bạn hỏi cách làm trang loading giống macintosh.vn.
Hôm nay, VNNET xin chia sẽ cho các bạn cách làm trang index loading trước khi vào website giống như macintosh.vn hiện tại.
Cách làm khá đơn giản :
1/ Website các bạn đặt trong 1 folder ở root ( không để trực tiếp code index web ở root nhé ! )
2/ Tạo file index.html ở root với nội dung sau :
Chỉnh sữa file html theo ý bạn nhé !
3/ Tải js và ảnh đính kèm giải nén.
* Chú ý : file src/processbar.js, mở file trên bằng notepad++ hay cái gì tùy thay https://vnnet.org thành đường dẫn vào wesite của bạn.
4/Xong up lên root ngang hàng file index.html vừa tạo và tận hưởng
Nguồn : https://vnnet.org/threads/huong-dan-lam-trang-index-load-giong-macintosh-vn.3036/
Hôm nay, VNNET xin chia sẽ cho các bạn cách làm trang index loading trước khi vào website giống như macintosh.vn hiện tại.
Cách làm khá đơn giản :
1/ Website các bạn đặt trong 1 folder ở root ( không để trực tiếp code index web ở root nhé ! )
2/ Tạo file index.html ở root với nội dung sau :
Mã:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head id="head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title id="header_title">VNNET - Resources Network Community</title>
<style type="text/css">
body {
background: url("img/Apple_gray_logo.png") CENTER 220px no-repeat;
background-color:#999999;
font-family: "Jura","lucida grande",sans-serif;
}
div.progress {
position:absolute ;
bottom:200px;
margin-left:-125px;
left:50%;
width: 250px;
height: 1%;
background-color: #eef;
border: 0.7px solid #eef;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
div.progressIndicator {
margin: 0;
padding: 0;
background: none repeat scroll 0% 0% #6E6F70;
position: relative;
top: 0;
left: 0px;
width: 10%;
height: 96%;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
div.progressVal {
position: relative;
top: 10px;
margin: 0;
padding: 0;
height: 20px;
text-align: center;
font-size:15px;
}
.hidden {
position: absolute !important;
top: -20em;
left: -200em;
}
.focus {
background-color: #eee !important;
}
</style>
<script type="text/javascript" src="./src/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./src/processbar.js"></script>
</head>
<body>
<div id="content">
<div id="pb1" class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" tabindex="0" aria-valuenow="93"></div>
</div>
</body></html>3/ Tải js và ảnh đính kèm giải nén.
* Chú ý : file src/processbar.js, mở file trên bằng notepad++ hay cái gì tùy thay https://vnnet.org thành đường dẫn vào wesite của bạn.
Mã:
var g_progress1 = null;
var g_$startButton = null;
var g_intervalID = null; // the handle of the interval set when the example is running
var g_curVal = 0;
var g_maxVal = 300;
function doUpdate() {
if (g_progress1.getProgress() == 100) {
window.location.assign("https://vnnet.org")
clearInterval(g_intervalID);
g_intervalID = null;
g_progress1.$progDiv.css('width', '100%');
g_curVal = 0;
g_$startButton.html('Reset Example');
return;
}
g_curVal = g_curVal + 1;
g_progress1.setValue(g_curVal);
}
$(document).ready(function() {
g_intervalID = setInterval(doUpdate,8);
var running = false;
g_progress1 = new progressbar('pb1', g_maxVal, true);
g_$startButton = $('#pb1_control');
});
function progressbar(container_id, max, showVal) {
// define progressbar object properties
this.$container = $('#' + container_id);
this.valMax = max;
this.showVal = showVal;
this.divWidth = 0;
// Store the size of the progress bar
this.width = this.$container.width();
// Store the page position of the widget
this.left = Math.round(this.$container.offset().left);
this.top = Math.round(this.$container.offset().top);
// Create and initialize the progress indicator
this.$container.append('<div id="progDiv" class="progressIndicator"></div>');
this.$progDiv = $('#progDiv');
this.$progDiv.css('width', '0%');
// Create and initialize the value box
this.$container.append('<div id="progVal" class="progressVal" aria-hidden="false"></div>');
this.$progVal = $('#progVal');
this.$progVal.html('0%');
if (this.showVal == false) {
this.$progVal.addClass('hidden').attr('aria-hidden', 'true');
}
}
progressbar.prototype.setValue = function(val) {
var percent = val * 100 / this.valMax;
if (percent <= 100.0) {
this.$container.attr('aria-valuenow', Math.round(percent));
this.$progDiv.css('width', percent + '%'); //Math.round(percent) + '%');
this.$progVal.html(this.$container.attr('aria-valuenow') + '%');
}
}
progressbar.prototype.getProgress = function() {
return this.$container.attr('aria-valuenow');
}
progressbar.prototype.positionHandle = function($handle, val) {
var handleHeight = $handle.outerHeight(); // the total height of the handle
var handleWidth = $handle.outerWidth(); // the total width of the handle
var handleOffset; // the distance from the value position for centering the handle
var xPos; // calculated horizontal position of the handle;
var yPos; // calculated vertical position of the handle;
var valPos; //calculated new pixel position for the value;
// calculate the horizontal pixel position of the specified value
valPos = ((val - this.min) / (this.max - this.min)) * this.width + this.left;
xPos = Math.round(valPos - (handleWidth / 2));
yPos = Math.round(this.top + (this.height / 2) - (handleHeight / 2));
// Set the position of the handle
$handle.css('top', yPos + 'px');
$handle.css('left', xPos + 'px');
// Set the aria-valuenow position of the handle
$handle.attr('aria-valuenow', val);
// Update the stored handle values
if (/1$/.test($handle.attr('id')) == true) {
// first handle
this.val1 = val;
} else {
// second handle
this.val2 = val;
}
// if showVal is true, update the value container
if (this.showVals == true) {
this.updateValBox($handle, Math.round(valPos));
}
} // end positionHandle()
progressbar.prototype.updateValBox = function() {
var $valBox = $('#' + $handle.attr('id') + '_val');
var xPos; // horizontal pixel position of the box
var yPos; // vertical pixel position of the box
// Set the position of the handle
var boxWidth = $valBox.outerWidth();
yPos = $handle.css('top');
// Adjust the horizontal position to center the value box on the value position
xPos = Math.round(valPos - (boxWidth / 2)) + 'px';
// Set the position of the value box
$valBox.css('top', yPos);
$valBox.css('left', xPos);
// Set the text in the box to the handle value
$valBox.text($handle.attr('aria-valuenow'));
} // end updateValBox()4/Xong up lên root ngang hàng file index.html vừa tạo và tận hưởng
Nguồn : https://vnnet.org/threads/huong-dan-lam-trang-index-load-giong-macintosh-vn.3036/
Bài viết liên quan
Bài viết mới
