本文详解如何优化JS运动框架，使其支持任意CSS属性的动态变化。通过引入属性名参数，将单一宽度运动扩展为通用函数。重点解决透明度（opacity）处理中的小数精度问题，对比parseInt与Math.round方法，推荐后者以确保动画结束时的数值准确性，从而构建一个兼容宽高、边框及透明度的通用运动特效。
通用运动框架的设计思路
本文详细介绍在JavaScript中实现任意CSS属性值动态变化的运动特效方法。
首先回顾前文提到的多物体运动实现思路：
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objWidth = parseInt(getStyle(obj,'width'));//因为是通过[]调用属性，所以width必须加单引号
// var iSpeed = (iTarget -obj.offsetWidth)/10;
// 因为objWidth存放的就是当前对象的宽，所以直接写objWidth而不是obj.objWidth
var iSpeed = (iTarget -objWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = objWidth+iSpeed+'px';
}
},30);
}
</script>
假设需求发生变化，例如第二个li元素鼠标移入时改变高度，第三个li元素鼠标移入时改变边框宽度，第四个li元素鼠标移入时改变背景透明度。若为每种变化单独复制startMove函数，并将width替换为height、borderWidth或opacity，代码将极度冗余。因此，最佳方案是将这些变化合并为一个通用函数，通过参数传递需要变化的属性名。
函数参数化改造
具体实现步骤如下： 1. 在startMove函数定义中增加attr参数，用于接收属性名。 2. 调用方式由原来的obj.style.属性名改为动态属性访问obj.style[属性名]。 3. 需分别为每个li元素绑定相应的事件处理程序。
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[0].onmouseover = function () {
startMove(this,'width',400);
}
liTags[0].onmouseout = function () {
startMove(this,'width',200);
}
liTags[1].onmouseover = function () {
startMove(this,'height',100);
}
liTags[1].onmouseout = function () {
startMove(this,'height',50);
}
liTags[2].onmouseover = function () {
startMove(this,'borderWidth',10);
}
liTags[2].onmouseout = function () {
startMove(this,'borderWidth',2);
}
liTags[3].onmouseover = function () {
startMove(this,'padding',10);
}
liTags[3].onmouseout = function () {
startMove(this,'padding',0);
}
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,attr,iTarget) {//attr：把变化的属性最为参数传入
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objAttr = parseInt(getStyle(obj,attr));
var iSpeed = (iTarget -objAttr)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objAttr == iTarget){
clearInterval(obj.timer);
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
}
},30);
}
</script>
透明度处理的难点分析
初步运行后发现，宽度、高度及边框的变化均正常，但最后一个改变“透明度”的功能却无响应，这是为何？
分析原因：首先，opacity的值如0.3是一个小数，parseInt(getStyle(obj,attr)后可能变为0；其次，在设置最终属性值时，代码为obj.style[attr] = objAttr+iSpeed+'px';。显然，opacity属性不需要px单位，因此必须对运动框架进行针对性处理。
需要增加判断逻辑：当接收到的参数为“透明度”时，执行特殊处理，修复上述两处问题。
var objAttr = 0;
if(attr == "opacity"){
// 由于计算机对 小数的处理有问题，这里用Math.round处理一下
// objAttr = parseFloat(getStyle(obj,attr)*100);
//objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);
objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
objAttr = parseInt(getStyle(obj,attr));
}
若直接采用objAttr = parseFloat(getStyle(obj,attr)*100);的方式，由于计算机浮点数运算存在精度误差，会导致动画效果异常。
尝试使用parseInt方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);。虽然能处理小数，但测试发现鼠标移出时，元素状态与初始状态存在微小偏差。
小数精度问题的解决方案
观察发现，鼠标移出时opacity理应恢复为1，但实际结果却是0.94。因此，个人推荐使用Math.round四舍五入函数来解决小数精度问题。
在代码中增加相应判断逻辑，确保透明度和其他属性的处理一致。
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
obj.style.opacity = (objAttr+iSpeed)/100;
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
}
完整代码实现
以下是完整的实现代码：
HTML结构部分
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
CSS样式部分
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
border: 2px solid #c00;
background: lightblue;
}
</style>
JavaScript逻辑部分
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[0].onmouseover = function () {
startMove(this,'width',400);
}
liTags[0].onmouseout = function () {
startMove(this,'width',200);
}
liTags[1].onmouseover = function () {
startMove(this,'height',100);
}
liTags[1].onmouseout = function () {
startMove(this,'height',50);
}
liTags[2].onmouseover = function () {
startMove(this,'borderWidth',10);
}
liTags[2].onmouseout = function () {
startMove(this,'borderWidth',2);
}
liTags[3].onmouseover = function () {
startMove(this,'opacity',30);
}
liTags[3].onmouseout = function () {
startMove(this,'opacity',100);
}
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,attr,iTarget) {//attr：把变化的属性最为参数传入
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objAttr = 0;
if(attr == "opacity"){
// 由于计算机对 小数的处理有问题，这里用parseFloat转一下
objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
objAttr = parseInt(getStyle(obj,attr));
}
var iSpeed = (iTarget -objAttr)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objAttr == iTarget){
clearInterval(obj.timer);
}else{
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
obj.style.opacity = (objAttr+iSpeed)/100;
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';
}
}
},30);
}
</script>
最终效果演示如下
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述的通用运动框架实现方法，能对JavaScript程序设计有所帮助。