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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
如何利用node转发请求详解
Sep 17 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
php中上传文件的的解决方案
2018/09/25 PHP
图片自动更新(说明)
2006/10/02 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python reverse反转部分数组的实例
2018/12/13 Python
python爬取指定微信公众号文章
2018/12/20 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
js实现弹框效果
2021/03/24 Javascript