您的位置：首页 > Web前端 > JavaScript

点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

2013-12-01 08:38 881 查看

效果：

思路：

首先，多功能框架实现的功能是:css中所有的属性都可以添加进去（也可以把方法作为参数传递过去！），然后进行缓冲运动，比如：物体的高度、长度、颜色、字体大小、透明度等，都可以直接传入参数然后进行运动，简单的说是利用json字符串把数据拼接起来，然后进行传参，参数传入进去到函数以后，根据参数的对象，还有属性，还有函数方法，然后再利用setInterval进行缓冲运动，最后判断运动什么时候结束。有一点要注意的是先用getStyle方法获取非行间样式！！！

代码：

<head id="Head1" runat="server">
<title></title>
<style type="text/css">
div
{
width: 100px;
height: 100px;
background: #00FF00;
left: 0;
position: absolute;
font-size: 20;
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function () {
var divOn = document.getElementById('div1');
divOn.timer = null;
divOn.onmouseover = function () {
move(divOn, { width: 400, height: 350, fontSize: 50, opacity: 100 });
};
divOn.onmouseout = function () {
move(divOn, { opacity: 30, height: 100, fontSize: 20, width: 100 });
};
}
//-----以下为多功能缓冲框架部分---------------------------------------------------------------------------------------------------------
//获取非行间样式
function getStyle(ojb, name) {
if (ojb.currentStyle) {
return ojb.currentStyle[name];
}
else {
return getComputedStyle(ojb, false)[name];
}
}
//缓冲运动json的应用
//json{attr,finsh}
//json{width:200,height:200}
function move(obj, json, fnName) {      //obj是对象，Json是对象的属性， fnName是函数
clearInterval(obj.timer);           //关闭之前的计时器
obj.timer = setInterval(function () {
var timeStop = true;        //记录属性是否都已经执行完成
for (var attr in json) {        //遍历json中的数据
var oGetStyle = 0;
if (attr == 'opacity') {  //判断透明度
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100);      //透明度取整，然后转换完后赋值
}
else {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / 5;       //求速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  //进位取整
//            if (oGetStyle == json[attr]) {      //如果到达，则关闭计时器
//                clearInterval(obj.timer);
//                if (fnName) {       //当关闭计时器后要执行的函数
//                    fnName();
//                }
//            }
//            else {
if (oGetStyle != json[attr])
timeStop = false;
if (attr == 'opacity') {    //透明度
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')';    //给透明度赋值
obj.style.opacity = (oGetStyle + speed) / 100;
}
else {
obj.style[attr] = oGetStyle + speed + 'px';     //移动div
}
//            }
}
if (timeStop) {     //如果所有属性都已经执行完成，那么就关闭计时器
clearInterval(obj.timer);
if (fnName) {       //当关闭计时器后要执行的函数
fnName();
}
}
}, 30)
}
//-----------------------------------------------------------------------------------------------------------------------
</script>
</head>
<body>
<div id="div1">
青苹果
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航