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程序设计有所帮助。

相关文章

  • JavaScript动态改变表格单元格内容的方法

    JavaScript动态改变表格单元格内容的方法

    这篇文章主要介绍了JavaScript动态改变表格单元格内容的方法,涉及javascript操作html中table表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 在线编辑器中换行与内容自动提取

    在线编辑器中换行与内容自动提取

    这几天在写在线编辑器,碰到个问题,当使用回车换行时不是你希望的<br>而是<p></p>对或是<div></div>对。使用google搜索,在网上找不到满意的答案。
    2009-04-04
  • JS实现音乐导航特效

    JS实现音乐导航特效

    这篇文章主要为大家详细介绍了JS实现音乐导航特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js实现防止被iframe的方法

    js实现防止被iframe的方法

    这篇文章主要介绍了js实现防止被iframe的方法,实例分析了两种比较常用的javascript防止页面被iframe的技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • wap浏览自动跳转到wap页面的js代码

    wap浏览自动跳转到wap页面的js代码

    这篇文章主要介绍了如何让用户输入wap手机网站的网址时自动跳转到wap网站,需要的朋友可以参考下
    2014-05-05
  • Javascript函数式编程语言

    Javascript函数式编程语言

    JavaScript 是近年来非常受瞩目的一门编程语言,它既支持面向对象编程,也支持函数式编程。本文专门介绍JavaScript函数式编程的特性。
    2015-10-10
  • 原生js实现模拟滚动条

    原生js实现模拟滚动条

    本文给大家分享的是使用原生javascript实现模拟滚动条的方法及代码,效果非常棒,有需要的小伙伴可以参考下。
    2015-06-06
  • js实现鼠标拖拽div左右滑动

    js实现鼠标拖拽div左右滑动

    这篇文章主要为大家详细介绍了js实现鼠标拖拽div左右滑动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • Webpack打包css后z-index被重新计算的解决方法

    Webpack打包css后z-index被重新计算的解决方法

    这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-06-06
  • 使用CoffeeScrip优美方式编写javascript代码

    使用CoffeeScrip优美方式编写javascript代码

    CoffeeScript就是JavaScript,他进行的是一对一的编译,或者说是翻译,而且编译成的JavaScript代码可读性很强。本文给大家介绍使用CoffeeScript优美方式编写javascript代码,感兴趣的朋友一起看看吧
    2015-10-10

最新评论