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


Posted in Javascript onApril 10, 2015

本文实例讲述了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 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
详解React之key的使用和实践
Sep 29 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 #Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 #Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 #Javascript
js简单的点击返回顶部效果实现方法
Apr 10 #Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 #Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 #Javascript
JavaScript 变量、作用域及内存
Apr 08 #Javascript
You might like
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
javascript重写alert方法的实例代码
2013/03/29 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
Python实现周期性抓取网页内容的方法
2015/11/04 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
Django之路由层的实现
2019/09/09 Python
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
单位消防安全制度
2014/01/12 职场文书
文案策划求职信
2014/04/14 职场文书
个人综合鉴定材料
2014/05/23 职场文书
消防志愿者活动方案
2014/08/23 职场文书
办理收楼委托书范本
2014/10/09 职场文书
期中考试复习计划
2015/01/19 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
农村党支部承诺书
2015/04/30 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
刮痧观后感
2015/06/05 职场文书
导游词之包公祠
2019/11/25 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
Nginx缓存设置案例详解
2021/09/15 Servers
2022微信温控新功能上线
2022/05/09 数码科技