Html5相关记录

一、网页的宽度自适应屏幕

1.meta

//完整的viewport设置

width=device-width:网页宽度默认等于屏幕宽度

initial-scale=1:原始缩放比例为1.0，网页的初始大小占全屏幕

user-scalable=no:是否允许主动缩放

二、元素浮动

1.顶部浮动

position:fixed;

top:0;

right:300px;//距离右侧300px

2.底部浮动

position:fixed;

bottom:0;

left:30px;//距离左侧30像素

如果想要覆盖底部浮动，就设置一个元素的属性为：(元素的长宽自定义)

position:relative;

z-index:10;

dingdingding------原来实现底部浮动被覆盖这么简单就可以实现，在坑里转了好久，蠢～～～

三、滚动条高度

1.滚动条距离浏览器顶部的高度(页面向上滚动的距离)

$(document).srollTop();

2.整个文档的高度

$(document).height();

3.文档的可见区域

$(window).height();

4.元素距离页面文档顶部的高度

$(selector).offset().top;

5.元素距离浏览器顶部的高度

//元素到页面顶端的距离－页面向上滚动的距离

$(selector).offset().top - $(document).scrollTop();

6.元素距离浏览器底部的高度

//可见区域－元素距离浏览器顶部的高度

$(window).height() - ($(selector).offset().top - $(document).scrollTop());

dingdingding------以上用来铭记在坑里的收获～～～

四、HTML DOM Video

1.video的获取:使用dom对象操作video

document.getElementById("myVideo");

$("#myVideo")[0];//将jquery对象转换成dom对象

$("#myVideo").get(0);

2.自定义controls

在video标签中不写controls属性

通过点击事件使用video的play()方法和paused()方法来控制视频的播放和暂停。

$("#play").on("click",function(){

video.play();

});

$("#pause").on("click",function(){

video.pause();

});

使用video的onplay事件和onpaused事件来设置播放和暂停时各个元素的状态。

video.onplay = function(){

$("#play").hide();

$("#pause").show();

n = setInterval(function() {

$("#progress").css("width", video.currentTime / video.duration * 100 + "%")

},50);//进度条宽度变化

$("#control").fadeOut(1000);//播放状态隐藏控制台

}

video.onpause = function(){

$("#pause").hide();

$("#play").show();

$("#control").show();

$("#control").fadeIn(1000);//暂停状态显示控制台

}

3.calc()函数

width:calc(100% - 53px);//设置宽度比100%的宽度少53px，运算符前后必须有空格

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:手指接触到屏幕就触发事件

touchend:手指离开屏幕的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchcancel:系统取消touch事件的时候触发

2.触摸事件的触摸列表

touches:屏幕上所有手指的列表

taegetTouches:在DOM元素上手指的列表

changedTouched:涉及到当前事件的手指列表

---------------这个没看好，还是以后再看吧

六、移动端和pc端比例

例如：

top:200px;

left:200px;

这样进行移动端和pc端切换时偏移会差很大

top:50%;

left:50%;

这样偏移不会很大，具体再用margin来调整

---

以上为这几天初次接触html5移动端开发的记录～～～