document 获取网页基本结构
- document 可以把一些东西写在网页中
document.write('123');
- 写入网页的基本结构
document.write(document.body + '<br>');
document.write(document.documnetElement + '<br>');
document.write(document.html + '<br>');
星海特效的一些关键点
//获取浏览器的高度和宽度
var screenW = document.documentElement.clientWidth;
var screenY = document.documentElement.clientHeight;
// body 中添加节点
document.body.appendChild(starSpan);
//随机数生成 （0~1）
Math.random();
//设置动画延迟
starSpan.style.animationDelay = ratoDelay + 's';
照片墙练习中的注意点
- 因为当添加节点后会改变节点数，在添加节点前后获取的值可能发生变化，所以我们要在添加节点之后获取浏览器的宽度和高度
- 主要应用思想逻辑
排他思想，随机数
事件对象
- 事件对象一般通过参数 event 传进函数内部
- IE 浏览器无法识别 event 所以用兼容写法
var event = event || window.event;
//获取点击的浏览器中的位置，始终是以浏览器的左上角作为参考点，就是坐标原点
event.clientX;
//获取点击的点在屏幕中的位置，是以屏幕的左上角为原点的
event.screenX;
//获取点击的点相对于文档的位置，是以文档作为参考点的
event.pageX;
//在只有一屏显示的时候
event.clientX = event.pageX;
放大镜案例中的一些注意点
//当移动到小的盒子上的时候让对应的大盒子以及 span 出现
smallBox.onmouseover = function(){
mask.style.display = 'block';
bigBos.style.display = 'block';
//进入小盒子之后，鼠标在其中移动时，设置 span 的位置以及设置大盒子中的图片移动
smallBox.onmousemove = function(event){
var event = event || window.event;
//移动公式
//移动的距离 = 当前移动的坐标的位置 - 小的盒子的offsetParent距离左边的间距 - mask的实体宽度的一半
var moveX = event.clientX -smallBox.offsetParent.offsetLeft - mask.offsetWidth*0.5
//当左边的小的 span 移动的时候，让大的盒子中的图片移动起来
//移动公式：小盒子移动的距离/大盒子中图片移动的距离 = 小盒子的宽度/大盒子的宽度
var bigX = - moveX/(smallBox.offsetWidth/bigBox.offsetWidth)
}
}
进度条展示中的注意点
//获取点击鼠标的点，距离 mask 的间距以及盒子举例浏览器的左侧距离
var event = event || window.event;
var distanceX = event.clientX - mask.offsetLeft;
document.onmousemove = function(event){
//获取移动的距离
var event = event || window.event;
//移动公式：移动的距离 = 当前移动的位置 - distanceX
var moveX = event.clientX -distanceX;
//事件中最后返回 false ,可以清空事件的一些默认行为
//这里清空的是动作条的来回滑动黏连
}
闭包的基本认识
window.onload = function(){
/*1.获取按钮*/
var btns = document.getElementsByTagName('button');
/*2.点击按钮弹出对应的索引值
在for循环中有延迟操作，i都获取不到
但是我们需要获取i值，我们可以采用扩展属性或者闭包
小闭包：()()，匿名函数自调
匿名函数：没有名称的函数
(匿名函数的定义)(函数调用)
//闭包可以记录变量的值
* */
for(var i = 0;i < btns.length;i++){
// btns[i].onclick = function(){
// alert();
// }
(function (b) {
btns[b].onclick = function(){
alert(b);
}
})(i);
}
}
放大镜特效实现的闭包修改
for(var i = 0;i < listImages.length;i ++){
(function(a){
listImages[a].onmouseover = function(){
/*4.1移动上去的时候切换图片*/
smallBox.children[1].src = 'images/pic00'+(a+1)+'.jpg';
big_img.src = 'images/pic0'+(a+1)+'.jpg'
}
})(i);
}
