复习
- BOM中顶级对象:Window
- DOM中顶级对象:Document
- jQuery中顶级对象:$或者jQuery
里面有完整轮播图思路
scroll系列
在div中的样式设置这个 overflow: auto; 超出的文字 会出现滚动条
//console.log(my$("dv").offsetWidth);//元素的宽,有边框
// //console.log(my$("dv").offsetHeight);//元素的高,有边框
// //console.log(my$("dv").scrollWidth);//元素中内容的实际的宽
// //console.log(my$("dv").scrollHeight);//元素中内容的实际的高
// console.log(my$("dv").scrollTop);//向上卷曲出去的距离
// console.log(my$("dv").scrollLeft);//向左卷曲出去的距离
获取宽高两者的区别 一个获去的有包含边框 一个没有包含边框是实际内容的高宽
onscroll 滚动事件 实时获取滚动
my$("dv").onscroll = function() {
console.log(this.scrollTop);
}
固定导航栏
这个滚动条的事件是浏览器的 window的 需要考虑兼容性
//获取浏览器向上卷曲出去的距离的值，向左卷曲出去的距离
兼容函数如下
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
这个函数返回的是一个对象
找到最上面的div的高度 当向上卷曲出去的距离超出这个高度时 让导航栏固定定位
解决页面不是平滑上去问题
使用marginTop 不要使用top 不然没效果
//如果直接使用 top 需要脱标 不然没效果
marginTop是相对于上一个没有定位的div等
滚动条事件
变速动画封装
复数 如 -8向下取整就是-9 就可以离目标更近一步
Math.ceil() Math.floor()一个天花板函数 一个地板函数
在if条件里面有用到判断等号 不能使用 单个等号 至少两个等号
需要给动画移动的速度进行向上向下取整 走整数的步数
function animate(ele, tar) {
//先清理定时器 防止重复点击
clearInterval(ele.timeId);
//直接使用ele.timeId接收定时器的返回值 这个不会出现bug
ele.timeId = setInterval(function() {
//获取当前的位置
var current = ele.offsetLeft;
//每次移动距离 变速
var step = (tar - current) / 10;
//做向上向下的取整 走整数的步数
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
//元素进行移动
ele.style.left = current + "px";
if (current == tar) {
clearInterval(ele.timeId);
}
}, 30)
}
筋斗云案例
案例里查看详情
获取元素计算后的样式属性值
兼容代码
function getStyle(element,attr) {
//判断浏览器是否支持这个方法
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
// //谷歌,火狐支持
// //console.log(window.getComputedStyle(my$("dv"),null).left);
//
// //console.log(window.getComputedStyle(my$("dv"),null)["left"]);
// //IE8支持
// //console.log(my$("dv").currentStyle.left);
对象.属性 还可以写成 对象[属性]
offsetLeft在文档没脱标使用left的情况下获取的数据是不正确的
使用margin-left的情况下获取的数据是正确
leg 如下
my$("btn").onclick = function() {
var data = getStyle(my$("dv"), "left");
console.log(data);
}
可以获取各种属性的值
####封装缓动动画增加任意一个属性
就是将上面的的函数和animate动画结合 就可以了
这样函数就更加的灵活
封装函数增加任意多个属性
传入的是对象
ele, json
循环遍历json进行操作
var target = json[attr]; 获取json字符串里面的值
当有一个到达时就清理定时器 解决方法
引入第三方变量 flag
判断 将清理定时器的代码放到外面 利用代码的执行顺序
封装动画函数 增加回调函数
传入一个函数 当定时里的内容走走完了 在执行
所以这个函数放在 定时器清理完那边执行
这个可以传入函数 函数里面在调用动画 可以实现多个动画的效果
回调函数时里面的代码执行完毕了 在执行
增加层级和透明度
在原有基础上进行增改 只需要加opacity方大100倍 进行 整数处理
有的属性值 时可以直接赋予的
手风琴案例
每个li标签里面的图片是当作背景图片
设置背景图片
list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg )"
需要注意观察它的样式 结构 你就明白其中奥妙了
当在循环里面需要为每个元素注册鼠标进入离开等事件 使用封装函数 节省内存
通过 动画改变其左右其宽高 就可以了
####开机动画案例
原理是样式中有两个div 点击的时候 先将上面的图片 缩小了，在进行第二次动画
看起来就会卡顿的效果了
其实只是将其高度宽度变为0 而已 不是真正的移出去
旋转木马案例
删除数组的第一个元素
arr.shift()
arr.push 添加一个元素 在数组的最后面
把数组第一个元素变成最后一个元素 (删除第一个元素并添加到最后)
arr.push(arr.shift())
删除最后一个元素 并添加到一个元素里面
arr.pop 删除最后一个元素 arr.unshift 添加元素到数组第一个元素
arr.unshift(arr.pop())
鼠标进入 按钮出现 慢慢出现 使用动画
<a href="javascript: void(0);"></a>
看到这个标签可以看到这个a是用来点击的
不做跳转功能的
点击按钮的时候 改变每个li标签的运用的config样式 就可以了
使用数组的方法 其实就改变config值得顺序就可以了
- 使用里面得那个div 注册鼠标进入离开事件 法解决出现快速点击得时候 按钮·消失问题
- 解决点击过快 上一次事件没有执行完毕
具体在案例里查看
client系列的相关属性 三大系列
offsetParent() 方法返回最近的祖先定位元素。
-
offset系列:获取元素的宽,高,left,top, offsetParent
- offsetWidth:元素的宽,有边框
- offsetHeight:元素的高,有边框
- offsetLeft:元素距离左边位置的值
- offsetTop:元素距离上面位置的
-
scroll系列:卷曲出去的值
- scrollLeft:向左卷曲出去的距离
- scrollTop:向上卷曲出去的距离
- scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框
- scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框
-
client系列:可视区域
- clientWidth:可视区域的宽(没有边框),边框内部的宽度
- clientHeight:可视区域的高(没有边框),边框内部的高度
- clientLeft:左边边框的宽度
- clientTop :上面的边框的宽度
案例图片跟着鼠标飞
//谷歌和火狐中都有这个事件参数对象,IE8中没有
//事件参数对象:e----在IE8中用window.event来代替
// document.onmousemove=function (e) {
// //console.log(arguments[0]);
// //console.log(e);
// };
document.onmousemove = function(e) {
e = window.event || e;
my$("im").style.left = e.clientX + "px";
my$("im").style.top = e.clientY + "px";
}
e = window.event || e;这个是兼容代码
这个代码有问题 当有滚动条的时候会有bug
pageX pageY就可以解决 但是 在ie8 不支持 pageX pageY
所以最终解决方法 就是加上向上 向左卷出去的距离 兼容性
代码如下
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
document.onmousemove = function(e) {
e = window.event || e;
//可视区域的横坐标
//可视区域的纵坐标
var scrLeft = getScroll().left;
var scrTop = getScroll().top;
my$("im").style.left = e.clientX + scrLeft + "px";
my$("im").style.top = e.clientY + scrTop + "px";
};
最终的兼容代码如下
//把代码放在一个对象中
var evt={
//window.event和事件参数对象e的兼容
getEvent:function (evt) {
return window.event||evt;
},
//可视区域的横坐标的兼容代码
getClientX:function (evt) {
return this.getEvent(evt).clientX;
},
//可视区域的纵坐标的兼容代码
getClientY:function (evt) {
return this.getEvent(evt).clientY;
},
//页面向左卷曲出去的横坐标
getScrollLeft:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的纵坐标
getScrollTop:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//相对于页面的横坐标(pageX或者是clientX+scrollLeft)
getPageX:function (evt) {
return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
},
//相对于页面的纵坐标(pageY或者是clientY+scrollTop)
getPageY:function (evt) {
return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
}
};
//最终的代码
document.onmousemove=function (e) {
my$("im").style.left=evt.getPageX(e)+"px";
my$("im").style.top=evt.getPageY(e)+"px";
};
在js案例中也有 第七天