(1)简单封装运动函数(宽,高,左,右)
//第一步
//首先封装不同兼容性下获取style样式属性
function getStyle(domobj, attr) {
if (window.getComputedStyle) {//搜狐谷歌
return getComputedStyle(domobj, null)[attr]
} else {//IE
return domobj.currentStyle[attr]
}
}
//第二步
//封装运动函数
function Move(domobj, json) {
//默认flag为true,下面做判断要用;
var flag = true;
//开始首先清除定时器,不懂看我之前关于分析定时器的帖子。
clearInterval(domobj.timer);
domobj.timer = setInterval(function () {
for (var attr in json) {
//获取目标值
var target = json[attr];
//获取初始设置值
//转换成数字,因为可能会带px值;
var value = Math.floor(getStyle(domobj, attr));
//定时器每运行一次获取的距离
var ispeed = (target - value) / 8;
//判断距离的正负,大于0向下取整,小于0,向上取整;
ispeed = ispeed > 0 ? ispeed = Math.floor(ispeed) : ispeed = Math.ceil(ispeed);
//设置style的样式
domobj.style[attr] = value + ispeed + 'px'
}
//判断是否到达临界值:即初始值和目标值相等
if (value !== target) {
flag = false;
}
//当两值相等时,清除定时器
if(flag){
clearInterval(domobj.timer)
}
}, 20)
}
优化多属性封装运动函数(宽高左右+透明度+回调函数)
关于透明度,下面之所以*100是因为初始值为0~1,所以先扩大范围。而获取目标值透明度传入
1~100方便下面进行计算
function Move(domobj, json, fn) {
//默认flag为true,下面做判断要用;
var flag = true;
//开始首先清除定时器,不懂看我之前关于分析定时器的帖子。
clearInterval(domobj.timer);
domobj.timer = setInterval(function () {
for (var attr in json) {
//获取目标值
var target = json[attr];
//获取初始设置值
//转换成数字,因为可能会带px值;
//判断属性里是否含有opacity,有则获取值*100再向下取整
if (attr === 'opacity') {
var value = Math.floor(getStyle(domobj, attr) * 100)
} else {
//获取除透明度外初始设置值
var value = Math.floor(getStyle(domobj, attr));
}
//定时器每运行一次获取的距离
var ispeed = (target - value) / 8;
//判断距离的正负,大于0向下取整,小于0,向上取整;
ispeed = ispeed > 0 ? ispeed = Math.floor(ispeed) : ispeed = Math.ceil(ispeed);
//设置style的样式
//两种情况,第一种透明度不加px,其他加px;
if (attr === 'opacity') {
domobj.style[attr] = value + ispeed;
}
domobj.style[attr] = value + ispeed + 'px';
}
//判断是否到达临界值:即初始值和目标值相等
if (value !== target) {
flag = false;
}
//当两值相等时,清除定时器
if (flag) {
clearInterval(domobj.timer);
if (fn) {//fn为回调函数,当运动到终点的时候执行这个函数//下面有例子会应用。
fn()
}
}
}, 20)
}
使运动依此进行;如:先变宽再边长或先右移动再左移动(利用回调函数)
下面运动为先宽,再高,再向下移动,最后向左移动
fn为回调函数,当运动到终点的时候会执行这个函数。
流程为:第一次调用(加宽+添加回调函数(
第二次调用(加高+添加回调函数(
第三次调用:向下移动+添加回调函数(
第四次调用(向右移动且不添加回调函数) )))))
如果想使效果同时出现,全部写在第二个对象中,调用一次即可。
odiv.onmousemove = function () {
setMove(odiv, {
width: 300,
}, function () {
setMove(odiv, { height: 300, }, function () {
setMove(odiv, { top: 300, }, function () {
setMove(odiv, {
left: 300,
})
})
})
})
}