文章目录
定位position小知识点
1. fixed - 固定定位
效果-整个可视窗口显示红色背景 （ 不受滚动条影响 ）
如果 height: auto 则不会有高度
只要fixed定位：height的百分位参考标准都为可视窗口的高度（ 跟随滚动条滚动 ）
<html>
<head>
<style>
body {
height: 1000px;
}
div {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div >
</div>
</body>
<html>
2. relative - 相对定位( 未脱离文档流 )
width、height的百分比是以父元素为标准的
3. absolute - 绝对定位
width、height的百分比是以可视窗口为标准 （ 不随滚动条滚动 ）
效果 - 设置了body的高度使页面出现滚动条，绝对定位的元素不随滚动条滚动
<html>
<head>
<style>
body {
height: 1000px;
}
div {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div >
</div>
</body>
<html>
模态框
HTML
<html>
<body>
<button>打开模态框</button>
<div class="modal-box">
<div class ="modal-box-content">
<button>关闭模态框</button>
</div>
</div>
</body>
<html>
CSS
* {
margin: 0;
padding: 0;
}
.modal-box {
display: none;
position: fixed;
z-index: 99999999999999999;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
}
.modal-box-content {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -150px;
background: red;
}
JS - 使用JQUERY
$(function() {
$("button").eq(0).click( function() {
$(".modal-box").css("display", "block");
})
$("button").eq(1).click( function() {
$(".modal-box").css("display", "none");
})
})
不能自动播放的解决方案 - chrome
背景：谷歌怕自动播放，突然放出声音，吓着用户，非常贴心的把自动播放禁止了*
方案1
遵循谷歌为用户着想的初心，只要把视频播放设置为静音即可以实现自动播放功能
<video src="1.mp4" autoplay muted controls></video>
方案2
使用JS强制让video自动播放
前提：视频播放前、必须有用户操作行为才能实现：例如click
html
<html>
<head>
<style>
video { display: none; }
</style>
</head>
<body>
<button>打开视频</buttom>
<video src="1.mp4" controls ></video>
</body>
<html>
JS
//使用 jquery
$(function() {
$("button").click(function() {
$(video)[0].play();
$(video).css( "display", "block" );
}
})
陷阱 - 无用户操作行为的JS代码、谷歌直接给你报错
html
<html>
<head>
</head>
<body>
<video src="1.mp4" controls></video>
</body>
</html>
JS
$(function() {
$("video")[0].oncanplay = function() {
this.play();
}
})
JS、html代码在浏览器地址栏的作用
1. 实现论坛自动回复
背景1：网页的地址栏可以写javascript代码，意味着可以搜索页面的标签元素，以及赋值*
背景2：地址栏可看成<a href=“链接”>标签 ---- 非常重要
这是整个制作流程
步骤1. 获取元素ID值
步骤2. 地址栏中写JS代码 - 点击键盘Enter即可以在当前页面运行JS代码
步骤3. 随便打开一个网页，点击地址栏中的 五角星★ → 点击更多
步骤4. 保存已经写好的代码到浏览器的书签 - 现在直接点击该书签即可运行
通用代码 - 读者自行复制下列代码随便找一个论坛试一下
javascript: // 注意复制这行代码时Chrome会过滤掉，需要自己手动添加
var text_comment = prompt("填写评论内容", "谢谢分享");
var input_box = document.getElementById("这里填写评论输入框id名");
var submit_btn = document.getElementById("这里填写评论回复按钮id名")
if ( text_comment != null ) {
input_box.value = text_comment;
}else {
input_box.value = "谢谢分享";
}
void(0); // 目的：地址栏的JS代码修改页面元素value值时会跳转页面 -- 阻止页面跳转
submit_btn.click();
2. 设置当前所在的页面可编辑
复制下述代码到当前打开页面的地址栏
javascript:
var a = document.getElementsByTagName( "html" )[0];
a.setAttribute( "contenteditable", "true" );
//a.setAttribute( "contenteditable", "false" ); -- 改回不可编辑的状态
void(0);
3. 浏览器新建的页面变编辑器 - 利用HTML5的全局属性
data:text/html, <html contenteditable> // 复制到地址栏 - 页面变编辑器
意味着可以在地址栏中写HTML代码、以及css样式 — 切记地址栏需要写 data:text/html,
示例 - 复制下列代码至浏览器地址栏查看效果
data:text/html,
<html>
<head>
<meta charset="utf-8">
<style>
a {
color:red;
}
</style>
<head>
<body>
<a href="http://www.baidu.com">百度一下吧！</a>
</body>
</html>
