三大家族属性
- client/scroll/offset
- clientLeft 表示当前标签距离左侧的 border 值
clientTop 表示当前标签距离顶部的 border 值
clientW = width + padding - offsetWidth = width + padding + border
offsetHeight = height + padding + border - scrollWidth 表示滚动内容的宽度
scrollHeight 表示滚动内容的高度
scrollTop 表示垂直滚动的距离
scrollLeft 表示水平滚动的距离 - offsetLeft 表示距离它的 offsetParent 左侧的距离
获取浏览器窗口的宽度
- ie9 及以上
window.innerHeight;
window.innerWidth;
- 一般浏览器符合 w3c
document.documentElement.clientWidth;
document.documentElement.clientHeight;
- 其他浏览器
document.body.clientWidth;
document.body.clientHeight;
//兼容写法
var screenW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
封装
function client(){
if(window.innerWidth){
return {
width:window.innerWidth,
height:window.innerHeight
}
}
else if(document.compatMode ='CSS1Compat'){
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
else{
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
}
//调用函数
var screenW = client().width;
窗口改变事件
window.onresize = function(){
alert(0);
}
窗口改变事件应用
//程序运行时就触发颜色改变
changeBg();
//对于事件源触发事件后面的事情指令如果封装成方法不加括号
var bgColor = '';
window.onresize = changeBg;
//封装一个函数用来改变颜色
function changeBg(){
var screenW = client().width;
if(screenW > 900){
bgColor = 'red';
}else if(screenW > 600){
bgColor = 'green';
}else if(screenW > 300){
bgColor = 'blue';
} document.body.style.background:bgColor;
}
事件冒泡
- 如果一个控件实现了某个功能，那么这个事件会依次把这个事件向上传递给他的父对象，如果父对象也实现对应的事件那么，父对象会自动触发对应的事件
btn.onclick = function(){
alert('我是按钮');
}
father.onclick = function(){
alert('我是父亲');
}
document.onclick = function(){
alert('我是最大事件源');
}
//alert 会弹出来三次
阻止事件冒泡
- 应该子标签中阻止冒泡
//普通浏览器阻止冒泡方法
event.stopPropagation();
//ie
event.cancelBubble = true;
冒泡事件的应用
- 获取点击区域的事件源的 id 的方法
普通浏览器event.target
ie 浏览器event.srcElement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡事件的应用</title>
<style>
*{
margin: 0;
padding: 0;
border:none;
}
html,body{
width:100%;
height: 3000px;
}
#panel{
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: #000;
opacity: 0.4;
/*用来兼容ie浏览器*/
filter: alpha(opacity:40);
display: none;
}
#login{
width:200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
background: skyblue;
display: none;
}
</style>
</head>
<body>
<button id="btn">登录</button>
<div id="panel"></div>
<div id="login"></div>
<script>
window.onload = function(){
/*0.抽取获取标签的函数*/
function $(tagId){
return typeof tagId ==='string'?document.getElementById(tagId):tagId;
}
/*1.获取标签*/
var btn = $('btn');
var panel = $('panel');
var login = $('login');
/*2.点击按钮让对应的div显示*/
btn.onclick = function(event){
/*2.0为了达到我们想要的效果，我们需要阻止事件冒泡*/
var event = event ||window.event;
if(event &&event.stopPropagation){
event.stopPropagation();
}else {
event.cancelBubble = true;
}
panel.style.display = 'block';
login.style.display = 'block';
/*2.1让对应的滚动条隐藏*/
document.body.style.overflow = 'hidden';
}
/*3.点击最大事件源让对应的div隐藏*/
document.onclick = function(event){
/*当点击最大事件源的时候，让出来登录div其余的区域才会隐藏，我们需要判断点击的区域
* 通过拿到事件的事件源的id来判断*/
/*3.1获取事件对象*/
var event = event ||window.event;
/*3.2获取点击区域的事件源的id*/
/*普通浏览器*/
// event.target
// ie
// event.srcElement
var targetId = event.target?event.target.id:event.srcElement.id;
/*3.3判断对应的id*/
if(targetId !='login'){
panel.style.display = 'none';
login.style.display = 'none';
/*3.4让滚动条出现*/
document.body.style.overflow ='auto';
}
}
}
</script>
</body>
</html>
获取选中内容
- 获取选中内容的事件对象
一般浏览器window.getSelection()
ie 浏览器document.selection.createRange().text
<script>
window.onload = function(){
/*1.获取标签*/
var word1 = document.getElementById('word1');
var word2 = document.getElementById('word2');
var share_text = document.getElementById('share_text');
var share_weibo = document.getElementById('share_weibo');
/*2.当选中内容后，在鼠标抬起后出发对应的事件*/
word1.onmouseup= function(event){
/*2.0获取事件对象*/
var event = event||window.event;
/*2.1获取选中内容*/
/*一般*/
// window.getSelection()
/*ie*/
// document.selection.createRange().text;
/*2.11设置变量用来记录选中的内容*/
var content_text = '';
if(window.getSelection){
content_text = window.getSelection();
}else {
content_text = document.selection.createRange().text;
}
/*2.12设置div显示以及设置他的位置和文字*/
share_text.innerHTML = content_text;
share_text.style.left = event.clientX +'px';
share_text.style.top = event.clientY +'px';
share_text.style.display = 'block';
}
var content_weibo = '';
/*2.2当在word2中抬起的时候出发对应的事件*/
word2.onmouseup = function(event){
/*2.21获取事件对象*/
var event = event||window.event;
if(window.getSelection){
content_weibo = window.getSelection();
}else {
content_weibo = document.selection.createRange().text;
}
/*2.22让对应的微博图片显示*/
share_weibo.style.display = 'block';
share_weibo.style.left = event.clientX +'px';
share_weibo.style.top = event.clientY +'px';
}
/*3.当点击document的时候，让对应的盒子隐藏而且让选中的内容不选中*/
document.onmousedown = function(event){
/*3.1让对应的盒子隐藏*/
/*3.11让除了显示内容的区域点下去的时候隐藏，所以位哦们获取点击的区域的id*/
var event = event ||window.event;
var targetId = event.target?event.target.id:event.srcElement.id;
if(targetId !='word1'){
share_text.style.display = 'none';
}
if(targetId!='share_weibo'){
share_weibo.style.display = 'none';
}else {
/*表示点击了微博，跳转分享界面*/
window.location.href = 'http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + content_weibo + '&url=https://www.baidu.com'
}
/*3.2让选中的内容不选中*/
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
}
}
</script>
匀速动画改造注意点
- 用 offsetLeft 来代替 begin
box.style.left = box.offsetLeft + speed +'px';
- 判断结束条件的补全
if(target - box.offsetLeft < speed){
clearInterval(timer);
box.style.left = target + 'px';
}
//当 target 小于 boxoffsetLeft 时
if(Math.abs(target2 - box.offsetLeft) < Math.abs(speed2){
clearInterval(timer2);
box.style.left = target2 + 'px';
}
- 其中数学公式
Math.abs()是取绝对值
抽取匀速动画函数
function constant(obj,target,speed){
clearInterval(timer);
obj.timer = setInterval(function(){
var mySpeed = target > obj.offsetLeft ? speed:-speed;
obj.style.left = obj.offsetLeft + mySpeed +'px';
if(Math.abs(target - obj.offsetLeft) < Math.abs(mySpeed)){
clearInterval(timer);
obj.style.left = target + 'px';
}
},20)
}
无限轮播图
<script>
window.onload = function(){
/*0.设置一个值用来记录将要显示的图片*/
var currentIndex = 0;
/*0.1设置一个值用来表示小圆点显示第几个*/
var indicateIndex = 0;
/*1.获取标签*/
var oul = document.getElementById('oul');
var ol = document.getElementById('ol');
/*1.0获取oul中原来的个数*/
var lis = oul.children;
/*1.1添加最后的图片*/
oul.appendChild(oul.children[0].cloneNode(true));
/*2.添加小的圆点*/
for(var i = 0;i < lis.length -1;i++){
var oli = document.createElement('li');
ol.appendChild(oli);
}
/*2.1s设置第一个为红色*/
ol.children[0].className = 'curr';
/*2.2当移动到小圆点上的时候，让对应的小圆点的颜色发生变化，就是一拍他思想*/
for(var i = 0;i < ol.children.length;i++){
/*2.2扩展属性用来记录i*/
ol.children[i].index = i;
ol.children[i].onmouseover = function(){
for(var j =0;j < ol.children.length;j++){
ol.children[j].className = '';
}
ol.children[this.index].className = 'curr';
/*2.3让对应的图片动起来*/
constant(oul,-this.index *750,20);
/*2.4当移动到小圆点的时候，应该切换对应的currIndex以及indicateIndex*/
currentIndex = this.index;
indicateIndex = this.index;
}
}
/*3.让自动动起来*/
var timer = setInterval(auto_play,1000);
function auto_play(){
currentIndex ++;
if (currentIndex > lis.length -1)
{
currentIndex = 1;
oul.style.left = 0;
}
/*动起来*/
constant(oul,-currentIndex*750,20);
/*设置小圆点的颜色*/
indicateIndex ++;
if (indicateIndex > ol.children.length -1){
indicateIndex = 0;
}
for(var i = 0;i < ol.children.length;i++){
ol.children[i].className = '';
}
ol.children[indicateIndex].className = 'curr';
}
}
</script>
克隆节点
- cloneNode():如果不传入参数，默认 false,那么只克隆节点本身，不会克隆子节点
如果传入 true 那么子节点也会被克隆
var cloneBox = box.cloneNode(true);
//添加克隆节点
document.body.appendChild(cloneBox);
