一墓陈、網(wǎng)頁的寬度自適應(yīng)屏幕
1.meta
//完整的viewport設(shè)置
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 user-scalable=no">
width=device-width:網(wǎng)頁寬度默認(rèn)等于屏幕寬度
initial-scale=1:原始縮放比例為1.0肠槽，網(wǎng)頁的初始大小占全屏幕
user-scalable=no:是否允許主動(dòng)縮放
二斜筐、元素浮動(dòng)
1.頂部浮動(dòng)
position:fixed;
top:0;
right:300px;//距離右側(cè)300px
2.底部浮動(dòng)
position:fixed;
bottom:0;
left:30px;//距離左側(cè)30像素
如果想要覆蓋底部浮動(dòng)，就設(shè)置一個(gè)元素的屬性為：(元素的長寬自定義)
position:relative;
z-index:10;
dingdingding------原來實(shí)現(xiàn)底部浮動(dòng)被覆蓋這么簡單就可以實(shí)現(xiàn)够委，在坑里轉(zhuǎn)了好久像云，蠢～～～
三境肾、滾動(dòng)條高度
1.滾動(dòng)條距離瀏覽器頂部的高度(頁面向上滾動(dòng)的距離)
$(document).srollTop();
2.整個(gè)文檔的高度
$(document).height();
3.文檔的可見區(qū)域
$(window).height();
4.元素距離頁面文檔頂部的高度
$(selector).offset().top;
5.元素距離瀏覽器頂部的高度
//元素到頁面頂端的距離－頁面向上滾動(dòng)的距離
$(selector).offset().top - $(document).scrollTop();
6.元素距離瀏覽器底部的高度
//可見區(qū)域－元素距離瀏覽器頂部的高度
$(window).height() - ($(selector).offset().top - $(document).scrollTop());
dingdingding------以上用來銘記在坑里的收獲～～～
四、HTML DOM Video
1.video的獲取:使用dom對(duì)象操作video
document.getElementById("myVideo");
$("#myVideo")[0];//將jquery對(duì)象轉(zhuǎn)換成dom對(duì)象
$("#myVideo").get(0);
2.自定義controls
在video標(biāo)簽中不寫controls屬性
通過點(diǎn)擊事件使用video的play()方法和paused()方法來控制視頻的播放和暫停锹漱。
$("#play").on("click",function(){
video.play();
});
$("#pause").on("click",function(){
video.pause();
});
使用video的onplay事件和onpaused事件來設(shè)置播放和暫停時(shí)各個(gè)元素的狀態(tài)箭养。
video.onplay = function(){
$("#play").hide();
$("#pause").show();
n = setInterval(function() {
$("#progress").css("width", video.currentTime / video.duration * 100 + "%")
},50);//進(jìn)度條寬度變化
$("#control").fadeOut(1000);//播放狀態(tài)隱藏控制臺(tái)
}
video.onpause = function(){
$("#pause").hide();
$("#play").show();
$("#control").show();
$("#control").fadeIn(1000);//暫停狀態(tài)顯示控制臺(tái)
}
3.calc()函數(shù)
width:calc(100% - 53px);//設(shè)置寬度比100%的寬度少53px，運(yùn)算符前后必須有空格
4.css3繪制三角形
border-top: 6px solid transparent;
border-left: 12px solid rgba(86,100,101,0.4);
border-bottom: 6px solid transparent;
5.:before(在圓上添加三角形)
#play_center{
width:50px;
height:50px;
background:rgba(190,190,190,.5);
position:absolute;
top:-160px;
left:210px;
border-radius: 25px;
}
#play_center:before{
content:"";
display:block;
position: absolute;
border-left: 18px solid #fff;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin: 13px 0 0 19px;
}
五哥牍、觸摸事件
1.事件
touchstart:手指接觸到屏幕就觸發(fā)事件
touchend:手指離開屏幕的時(shí)候觸發(fā)
touchmove:手指在屏幕上滑動(dòng)的時(shí)候觸發(fā)
touchcancel:系統(tǒng)取消touch事件的時(shí)候觸發(fā)
2.觸摸事件的觸摸列表
touches:屏幕上所有手指的列表
taegetTouches:在DOM元素上手指的列表
changedTouched:涉及到當(dāng)前事件的手指列表
---------------這個(gè)沒看好毕泌，還是以后再看吧
六喝检、移動(dòng)端和pc端比例
例如：
top:200px;
left:200px;
這樣進(jìn)行移動(dòng)端和pc端切換時(shí)偏移會(huì)差很大
top:50%;
left:50%;
這樣偏移不會(huì)很大，具體再用margin來調(diào)整
以上為這幾天初次接觸html5移動(dòng)端開發(fā)的記錄～～～
