201610-H5項目總結

1.首屏進入動效使用jQuery的animate();javascript

$('.btn_driver').animate({
left:'26%'
},'slow');
$('.btn_show').animate({
right:'24%'
},'slow');

  

2.jQuery頁面加載完成後自動執行某個事件
方法:
1)在$(function(){   });外部寫一個全局的函數,在該函數中寫頁面加載完成後須要執行的事件,而後再$(function(){   });裏面調用該函數便可;
$(document).ready(function () {
setTimeout(btn_show,1000);
});
function btn_show(){
$('.btn_driver').animate({
left:'26%'
},'slow');
$('.btn_show').animate({
right:'24%'
},'slow');
}

  

2)$(window).load();使用這個方法,會在頁面全部內容加載完成以後執行;
$(window).unload();在頁面關閉時觸發;
3.H5插入背景音樂使用<audio>標籤;
1)mp3不支持火狐瀏覽器和歐朋瀏覽器,通常使用ogg和mp3格式即可兼容全部瀏覽器;
2)音頻瀏覽器支持狀況:
音頻格式 Chrome Firefox IE9 Opera Safari
OGG  
MP3    
WAV      
3)經過jQuery對音頻進行控制(暫停或開始);
4)autoplay:音頻加載完後自動播放;
controls:顯示播放控件;
loop:音頻播放完以後繼續循環播放;
preload:音頻在頁面加載時進行加載,並預備播放;若是使用autoplay則忽略該屬性;
//音樂開關
$('.audio_content').click(function(){
if ($(this).hasClass('audiocolse')) {
$(this).removeClass('audiocolse').addClass('audioplay');
$('#music01')[0].play();
}else{
$(this).addClass('audiocolse').removeClass('audioplay');
$('#music01')[0].pause();
$('#music01')[0].currentTime = 0;
}
});

  

4.H5自適應以及頁面佈局;
1)使用百分比佈局原理:百分比佈局是相對的,相對於設備的寬度來使頁面在不一樣分辨率的手機上達到自適應;
2)百分比都是相對於父級而言的。將父級的元素設置成相對定位,寬度設置爲100%,子元素設置的百分比都是相對於這個父元素。
3)子元素設置爲絕對定位position:absolute;,top、right、bottom、left其中二者的值設置爲0;
4)margin值的計算:不論是top仍是right、bottom、left值的計算,都是用元素到相對位置的父元素的距離除以父元素盒子的寬度。
如:對於汽車留資表單定位

 
 
「姓名」定位計算:margin-top爲(y/w)*100;margin-left:(x/w)*100;
注:y爲姓名輸入框到父元素盒子的垂直方向的距離,x爲姓名輸入框到父元素盒子的水平方向的距離;W爲父元素盒子的寬度width;
其餘距離計算相似;
margin佈局參考連接:http://html.cigtest.com.cn/victor-test/q3-week/
參考資料:http://www.cnblogs.com/leinov/p/4679752.html
5) 引伸:paddinf-top撐開佈局
使用margin百分比適應移動端佈局,寬度可控。要想使高度可控時,使用padding-top;
說明:margin爲外邊距,padding爲內邊距;百分比都是相對於父級而言;使用padding-top撐開盒子;padding是相對於自身的,當父元素設置了寬度,padding的百分比相對於父元素的寬度變化。繼承了父元素的寬度,高度就由padding-top撐開,因此高度也會隨着不一樣設備屏幕變化而變化;
  1. <style>
    html,body{width:100%;}
    .box{position:relative;}
    .box-child{width:50%;height:0;padding-top:50%;background:red;}
    </style>
    <body>
    <div class="box box-child"></div>
    </body>

     

注:padding-top撐開了盒子,佔用了內部空間。可是往盒子放內容會把內容擠下去。解決辦法:給盒子內部須要放的內容再放在一個盒子裏面,給用padding-top撐開佈局的盒子設置相對定位,將盒子內部的內容設置爲絕對定位。而後經過設置left、right、top、bottom來定位;
<style>
html,body{width:100%;}
.box{position:relative;}
.box-child{width:50%;height:0;padding-top:50%;background:red;}
.content{position:absolute;left:0;top:0;width:100%;height:100%;}
.content img{width:100%;}
</style>
<body>
<div class="box box-child">
<div class="content">
<img src="image/1.jpg" alt="">
</div>
</div>
</body>

 

padding佈局參考連接:
http://html.cigtest.com.cn/victor-test/audi/
參考資料:
http://www.cnblogs.com/leinov/p/4904184.html
 
5.按鈕多樣化展現形式:
說明:通常的按鈕形式如input radio的形式默認的比較單一,有時候設計上有不少按鈕展示形式。
解決方法:1)checkbox樣式,加label用for屬性關聯來增長樣式;
2)將按鈕以圖片的樣式展現,經過點擊動做切換不一樣的類來實現(將不一樣狀態下的按鈕樣式放在不一樣的類中)。
建議採起第二種,第二種實現方式更加簡單易操做;
 
6.盒子內容顯示不全,或者只能固定在必定範圍寬高內展現,能夠採用加滾動條的方式來解決。
解決方法:給盒子設置寬高,而後根據須要在垂直方向或者水平方向上設置overflow-y、overflow-x爲auto來增長滾動條;
 
7.360度全景展現(利用three.js,只須要六張圖片就可實現)
前提:6張圖片,分爲上下、左右、先後;
原理:將六張圖鋪在一個球上,用戶的視角至關於站在這個球的中心點上觀看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<style>
body {
background-color: #000000;
margin: 0;
cursor: move;
overflow: hidden;
}
a {
color: #ffffff;
}
#info {
position: absolute;
width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
font-weight: bold;
text-align: center;
z-index: 1;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/340/p1qwizuy/three.min.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/340/p1qwizuy/CSS3DRenderer.js"></script>
<script>
var camera, scene, renderer;
var geometry, material, mesh;
var target = new THREE.Vector3();
var lon = 90, lat = 0;
var phi = 0, theta = 0;
var touchX, touchY;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
scene = new THREE.Scene();
var sides = [
{
url: 'img/posx.jpg',
position: new THREE.Vector3( -512, 0, 0 ),
rotation: new THREE.Vector3( 0, Math.PI / 2, 0 )
},
{
url: 'img/negx.jpg',
position: new THREE.Vector3( 512, 0, 0 ),
rotation: new THREE.Vector3( 0, -Math.PI / 2, 0 )
},
{
url: 'img/posy.jpg',
position: new THREE.Vector3( 0,512, 0 ),
rotation: new THREE.Vector3( Math.PI / 2, 0, Math.PI )
},
{
url: 'img/negy.jpg',
position: new THREE.Vector3( 0, -512, 0 ),
rotation: new THREE.Vector3( - Math.PI / 2, 0, Math.PI )
},
{
url: 'img/posz.jpg',
position: new THREE.Vector3( 0, 0,512 ),
rotation: new THREE.Vector3( 0, Math.PI, 0 )
},
{
url: 'img/negz.jpg',
position: new THREE.Vector3( 0, 0, -512 ),
rotation: new THREE.Vector3( 0, 0, 0 )
}
];
for ( var i = 0; i < sides.length; i ++ ) {
var side = sides[ i ];
var element = document.createElement( 'img' );
element.width = 1026; // 2 pixels extra to close the gap.
element.src = side.url;
var object = new THREE.CSS3DObject( element );
object.position = side.position;
object.rotation = side.rotation;
scene.add( object );
}
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
}
function onDocumentMouseMove( event ) {
var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
lon -= movementX * 0.1;
lat += movementY * 0.1;
}
function onDocumentMouseUp( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove );
document.removeEventListener( 'mouseup', onDocumentMouseUp );
}
function onDocumentMouseWheel( event ) {
camera.fov -= event.wheelDeltaY * 0.05;
camera.updateProjectionMatrix();
}
function onDocumentTouchStart( event ) {
event.preventDefault();
var touch = event.touches[ 0 ];
touchX = touch.screenX;
touchY = touch.screenY;
}
function onDocumentTouchMove( event ) {
event.preventDefault();
var touch = event.touches[ 0 ];
lon -= ( touch.screenX - touchX ) * 0.1;
lat += ( touch.screenY - touchY ) * 0.1;
touchX = touch.screenX;
touchY = touch.screenY;
}
function animate() {
requestAnimationFrame( animate );
lon +=0.1;
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
target.x = Math.sin( phi ) * Math.cos( theta );
target.y = Math.cos( phi );
target.z = Math.sin( phi ) * Math.sin( theta );
camera.lookAt( target );
renderer.render( scene, camera );
}
</script>
</body>
</html>

 

注:此方法爲響應式,可以使用不一樣分辨率的PC和WAP;
 
9.移動端整屏滑動使用swiper插件:
這次用的幾個屬性:
1)direction: 'horizontal'水平方向滑動,vertical垂直方向滑動;
2)mySwiper.slideTo(a, b, false);滑動到某一頁,slideTo裏面的參數a爲滑動到第幾頁,b爲指定多少時間內完成該動做,單位爲毫秒;
3)將某一頁禁用滑動效果:給禁用的那一頁加上swiper-no-swiping類便可;
 
注:swiper插件在移動端使用很方便,這個項目比較簡單,頁數較少,使用的API較少,須要不斷的研究。在工做中用這些插件,若是熟練,那就可以很順手很便捷的完成開發。可是最好是可以本身寫,有本身的框架。
 
總結:在這個項目中,鍛鍊了本身不少關於H5方面的開發知識。一開始看起來不少不會作的功能,經過慢慢的查資料,看手冊,問同事,慢慢的摸索了出來。
從這個項目中也看到了本身不少問題,其實不少東西並不難,只是本身沒有接觸到更多的知識,項目真的很可以鍛鍊人。這種不斷探索本身未知的事物的感受很好。
swiper插件很好用,可是終究不是本身的,必定要抽時間學習,寫一個本身的插件。
three.js目前還不會用,只能模仿別人的,須要不斷的去研究這裏面的API;
不斷學習~~~
相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息