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

JS-运动框架

2013-09-29 19:13 330 查看

用JS来控制HTML元素样式变化

move.js:

//获取样式值
function getStyle(obj, attr)
{
if( obj.currentStyle) //IE
{
return obj.currentStyle[attr];
} else //Chrome、 FF
{
return getComputedStyle(obj, false)[attr];
}
}

//传入参数：运动目标，运动参数键值对（json），连接函数
function start_move(obj,json, fn_end )
{
//清除计时器
clearInterval(obj.timer);
obj.timer = setInterval(
function()
{
var bStop = true;//判断是否该停止运动
//依次从json中取出各个属性
for( var attr in json)
{
var cur = 0; //记录属性的当前
//获取属性的当前值
if( attr == "opacity" )
{
//保证cur是个整数
cur = Math.round(parseFloat(getStyle(obj, attr)*100));
}
else
{
cur = parseInt(getStyle(obj, attr));
}
//计算速度
var speed = ( json[attr] - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//判断是否停止运动
if( cur != json[attr] )//如果当前值不等于目标值
{
bStop = false;
//更改obj属性
if( attr == "opacity" ){
obj.style.filter = "alpha(opacity:" + cur + speed + ")";
obj.style.opacity = (cur + speed) / 100;
}
else
{
obj.style[attr] = cur + speed + "px";
}
}
}
if( bStop)
{
clearInterval(obj.timer);//清除计时器
if( fn_end )
{//调用连接函数
fn_end();
}
}
}
);
}

CurrentStyle 对象(IE兼容):代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。

getComputedStyle 函数：Chrome和FF兼容，获取元素样式。

关于样式表

样式表有三种：

内嵌样式（inline Style）：是写在Tag里面的，内嵌样式只对所有的Tag有效。

内部样式（internal Style Sheet）：是写在HTML的<head></head>里面的，内部样式只对所在的网页有效。

外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

对于最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。在这种情况下可以通过CurrentStyle
，ComputedStyle和RuntimeStyle来解决。

CurrentStyle：代表了在全局样式表、内嵌样式和
HTML 标签属性中指定的对象格式和样式。

RuntimeStyle：代表了居于全局样式表、内嵌样式和
HTML 标签属性指定的格式和样式之上的对象的格式和样式。运行时的样式，如果与style的属性重叠，将覆盖style的属性。

currentStyle可以弥补style的不足，但是只适用于IE。
getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。

测试例子：

<!DOCTYPE HTML>
<html>
<head>
<title>Test Move</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="move.js"></script>
</head>
<style type="text/css">
#div1 {
left: 40px;
top: 40px;
width: 20px;
height: 20px;
position: absolute;
background: red;
}
</style>
<body>
<div id="div1"></div>
<input type="button" id="button" value="Move"></button>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oButton = document.getElementById("button");
var oDiv = document.getElementById("div1");

function move_button_back(){
start_move( oButton, {height: 20, width: 40});
}

function move_div_back(){
start_move( oDiv, {left: 40, height: 20, width: 20});
}

oButton.onclick = function() {
start_move(oButton, {width: 300, height: 300}, move_button_back);
start_move(oDiv, {left: 300, width: 200, height: 80}, move_div_back);
}
}
</script>

运行效果：

参考：http://hi.baidu.com/lepharye/item/c36d3ba9ab3a919c14107344

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

标签：

相关文章推荐

新的分享

章节导航