一、网页的宽度自适应屏幕
1.meta
//完整的viewport设置
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 user-scalable=no">
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移动端开发的记录～～～
网友评论