A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2017-9-21 16:10 编辑

【黑马程序员济南】 前端与移动开发就业班笔记事件特效:Day01


offset系列offsetWidth和offsetHeight
用来得到对象的大小
offsetHeight和style.height的区别
demo.style.height只能获取行内样式,如果样式写到了其他地方,甚至根本就没写,便无法获取
style.height是字符串(而且带单位),offsetHeight是数值
demo.style.height可以设置行内样式,offsetHeight是只读属性
因此,一般用demo.offsetHeight来获取某元素的真实宽度/高度,用style.height来设置宽度/高度

offsetHeight的构成
offsetHeight = height+padding+border
包括 自身高度 内边距 边框 不包括 外边距
offset.png

offsetParent
offsetParent爸爸去哪
返回该对象距离最近的带有定位的父级
如果当前元素的所有父级元素都没有定位(position为absolute或relative),offsetParent为body
如果当前元素的父级元素中有定位(position为absolute或relative),offsetParent取最近的那个父级元素
另外注意offsetParent与parentNode的区别parentNode只找自己的上一级

offsetLeft和offsetTop
用来得到对象的位置(注意:没有offsetRight和offsetBottom)
offsetLeft的构成
到距离自身最近的(带有定位的)父元素的左侧/顶部 的距离
如果所有父级都没有定位则以body 为准
offsetLeft是自身border左侧到父级padding左侧的距离
1.png 2.png
offsetLeft和style.left的区别
一、style.left只能获取行内样式
二、offsetLeft只读,style.left可读可写
三、offsetLeft是数值,style.left是字符串并且有单位px
四、如果没有加定位,style.left获取的数值可能是无效的
五、最大区别在于offsetLeft以border左上角为基准,style.left以margin左上角为基准

在行内设置以下属性,并且记得加定位
3.png


Math对象
Math对象常用方法
天花板 向上取整 负数取更大的
Math.ceil(x)
地板 向下取整 负数取更小的
Math.floor(x)
就近取整
Math.round(x)
取绝对值
Math.abs(x)
[JavaScript] 纯文本查看 复制代码
	/**
	*@author 传智播客
	*/
    console.log(Math.ceil(1.9));//2 天花板 向上取整
    console.log(Math.ceil(1.1));//2 天花板 向上取整
    console.log(Math.ceil(-1.1));//-1 天花板 向上取整
    console.log(Math.ceil(-1.9));//-1 天花板 向上取整
    console.log(Math.floor(1.1));//1 地板 向下取整
    console.log(Math.floor(1.9));//1 地板 向下取整
    console.log(Math.floor(-1.1));//-2 地板 向下取整
    console.log(Math.floor(-1.9));//-2 地板 向下取整
    console.log(Math.round(1.1));//1 周围 就近取整
    console.log(Math.round(1.9));//2 周围 就近取整
    console.log(Math.round(-1.1));//-1 周围 就近取整
    console.log(Math.round(-1.9));//-2 周围 就近取整
    console.log(Math.abs(1.1));//1.1 absolute 绝对值
    console.log(Math.abs(-1.1));//1.1 absolute 绝对值

动画原理
动画原理公式
动画原理公式: leader = leader + step
leader表示盒子当前位置
step表示步长
box.style.left= box.offsetLeft + 10 + "px";
让setInterval不断执行某个函数修改盒子的位置属性最后就实现了动画的效果
动画函数封装
动画函数较为复杂,却又很常用对于这样的函数,我们一般都会进行封装
需求:能够让任意对象移动到指定位置
[JavaScript] 纯文本查看 复制代码
	/**
	 *@author 传智播客
	 */
    //需求 能够让任意对象移动到指定位置
    function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var leader = obj.offsetLeft;
            var step = 10;
            if (leader < target) {
                leader = leader + step;
                obj.style.left = leader + "px";
            } else {
                clearInterval(obj.timer);
            }
        }, 15);
    }


动画函数改进
然而封装之后的函数还有很多问题,所以我们要对其进行进一步改进
判断运动方向
完善终点检测
终点清除定时器
手动设置对象位置到终点
调用开始先清理定时器,防止多次调用
[JavaScript] 纯文本查看 复制代码
	/**
*@author 传智播客
*/
//需求 能够让任意对象移动到指定位置
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var leader = obj.offsetLeft;
var step = 10;
step = leader < target ? step : -step;//step有了正负
if (Math.abs(leader - target) >= Math.abs(step)) {
leader = leader + step;
obj.style.left = leader + "px";
} else {
obj.style.left = target + "px";//手动放到终点
clearInterval(obj.timer);
}
}, 15);
}

最后附送一份今天的案例。如果你想了解更多黑马课程请点击这里,如果你想加入黑马这个大家庭学习先进技术,广交天下好友,那就快来吧!
黑马程序员济南中心联系电话:0531-55696830

完整轮播图.rar

275.44 KB, 下载次数: 104

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马