js实现同一页面多个不同运动效果的方法

更新时间：2015年04月10日 09:37:05 作者：jingangel

这篇文章主要介绍了js实现同一页面多个不同运动效果的方法,涉及javascript同时实现多个效果的技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现同一页面多个不同运动效果的方法。分享给大家供大家参考。具体分析如下：

要点一：

function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}

从样式表中根据id和属性名取值。

要点二：

if(attr == "opacity"){
cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}

如果设置的是透明度的值，因为有可能会是小数点，所以需要用parseFloat，然后有可能会有小数，用round方法四舍五入取整。

如果设置的非透明度值，用parseInt，可以只取数值部分

其它的注意点，前面几篇都有提到，此处不再赘述。

最后，上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c;
list-style:none; margin:10px; border:1px solid #000;
filter:alpha(opacity=30); opacity:0.3;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
  runs_li[0].onmouseover = function(){
   startrun(this,"width",300);
  }
  runs_li[0].onmouseout = function(){
   startrun(this,"width",80);
  }
  runs_li[1].onmouseover = function(){
   startrun(this,"height",300);
  }
  runs_li[1].onmouseout = function(){
   startrun(this,"height",80);
  }
  runs_li[2].onmouseover = function(){
   startrun(this,"fontSize",50);
  }
  runs_li[2].onmouseout = function(){
   startrun(this,"fontSize",14);
  }
  runs_li[3].onmouseover = function(){
   startrun(this,"opacity",100);
  }
  runs_li[3].onmouseout = function(){
   startrun(this,"opacity",30);
  }
}
function startrun(obj,attr,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var cur = 0;
 if(attr == "opacity"){
  cur = Math.round(parseFloat(getstyle(obj,attr))*100);
 }else{
  cur = parseInt(getstyle(obj,attr));
 }
 var speed = (target - cur)/8;
 speed = speed>0?Math.ceil(speed):Math.floor(speed);
  
  if(cur == target){
   clearInterval(obj.timer);
  }else{
   if(attr == "opacity"){
    obj.style.filter='alpha(opacity='+(cur+speed)+')';
    obj.style.opacity=(cur+speed)/100;
   }else{
    obj.style[attr] = cur+speed+"px";
   }
  }
 },30);
}
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
</script>
</head>
<body>
<ul id="runs">
 <li style="top:0">1</li>
 <li style="top:90px;">2</li>
 <li style="top:180px;">3</li>
 <li style="top:270px;">4</li>
</ul>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

js
运动

原生JS实现H5转盘游戏的示例代码
这篇文章主要介绍了如何利用原生JS实现转盘游戏，可以自由调整概率。文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，需要的可以参考一下
2022-03-03
类似框架的js代码
类似框架的js代码...
2006-11-11
一个可以随意添加多个序列的tag函数
由于在没有规划好的情况下写的这个代码，写的比较粗糙，也没有添加注释。 JavaScript代码和HTML完全分离；可以随意添加多个子div标签，自动扩展
2009-07-07
微信小程序用户授权环节实现过程
这篇文章主要介绍了微信小程序用户授权环节实现过程，在商城项目中，我们需要对部分的页面，进行一个授权的判别，例如购物车，及个人中心，需要完成用户信息的授权后，获取到相关信息
2023-01-01
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
这篇文章主要介绍了根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本),需要的朋友可以参考下
2015-09-09
showModalDialog 和 showModelessDialog
showModalDialog 和 showModelessDialog...
2007-01-01
JS面向对象编程实现的拖拽功能案例详解
这篇文章主要介绍了JS面向对象编程实现的拖拽功能,结合具体案例形式详细对比分析了JS面向过程与面向对象实现的拖拽功能相关操作技巧,需要的朋友可以参考下
2020-03-03
js中undefined该怎么判断浅析
可能很多朋友认为undefined是在js中未定义变量时才会提示的错误,其实不然undefined 是js中的一特殊的变量,我们也可以提前定义哦,下面这篇文章主要给大家介绍了关于js中undefined该怎么判断的相关资料,需要的朋友可以参考下
2023-04-04
使用JavaScript校验URL的方法小结
JavaScript中如何校验一个URL？最近遇到几次需要校验URL的,所以本文给大家整理一下几个校验URL的方法,文中有详细的代码讲解和图文参考,具有一定的参考价值,需要的朋友可以参考下
2023-12-12
浅谈regExp的test方法取得的值变化的原因及处理方法
下面小编就为大家带来一篇浅谈regExp的test方法取得的值变化的原因及处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03