js运动框架_包括图片的淡入淡出效果


Posted in Javascript onMay 11, 2013
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<font face="Verdana, Geneva, sans-serif"></font>
<style type="text/css">    
    #div1{width:100px;height:100px;background:#ccc;position:absolute;top:0px;left:0px;}
    #div2{width:100px;height:100px;background:#ccc;position:absolute;left:0px;top:110px;}
    #div3{width:100px;height:100px;background:red;position:absolute;left:220px;top:0px;filter:alpha(opacity:30);opacity:0.3;}
    #div4{width:100px;height:100px;background:red;position:absolute;left:330px;top:0px;filter:alpha(opacity:30);opacity:0.3;}
    #div5{width:100px;height:100px;background:red;position:absolute;left:440px;top:0px;filter:alpha(opacity:30);opacity:0.3;}
</style>
<script type="text/javascript">
window.onload=function()
{        
    oDiv1=document.getElementById("div1");
    oDiv2=document.getElementById("div2");
    oDiv3=document.getElementById("div3");
    oDiv4=document.getElementById("div4");
    oDiv5=document.getElementById("div5");
    oDiv1.onmouseover=function(){
        Move(oDiv1,"width",200);    
        //alert(getStyle(oDiv1,"width"));
    }
    oDiv1.onmouseout=function(){
        Move(oDiv1,"width",100);
    }
    oDiv2.onmouseover=function(){
        Move(oDiv2,"height",200);      
    }
    oDiv2.onmouseout=function(){
        Move(oDiv2,"height",100);
    }
    oDiv3.onmouseover=function(){
        Move(oDiv3,"opacity",100);
    }
    oDiv3.onmouseout=function(){
        Move(oDiv3,"opacity",30);
    }
    oDiv4.onmouseover=function(){
        Move(oDiv4,"opacity",100);    
    }
    oDiv4.onmouseout=function(){
        Move(oDiv4,"opacity",30);
    }
    oDiv5.onmouseover=function(){
        Move(oDiv5,"opacity",100);   
    }
    oDiv5.onmouseout=function(){
        Move(oDiv5,"opacity",30);
    }
    
} 
    //获取行间样式    
    function getStyle(obj,attr)   //getStyle 非行间属性  结果值为 ***px  
    {    if(obj.currentStyle)
        {
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }        
    }   
   
 //多物体不同运动框架
    function Move(obj,attr,itarget)
    {    
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            if(attr=="opacity")
            {    cur=parseFloat(getStyle(obj,attr))*100;
                speed=(itarget-cur)/10;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);    
                if(cur==itarget)
                    {
                    clearInterval(obj.timer);
                    }else
                    {    cur+=speed;
                        obj.style.opacity=cur/100;
                        obj.style.filter="alpha(opacity:"+cur+")";                
                    }                
            }
            else
            {
                cur=parseInt(getStyle(obj,attr));
                speed=(itarget-cur)/10;   //parseInt 获取的值转化为数
                speed=speed>0?Math.ceil(speed):Math.floor(speed);    //向下、向上取正
                if(cur==itarget)
                {
                    clearInterval(obj.timer);
                }else
                {
                    obj.style[attr]=cur+speed+"px";        
                }    
            }    
        },30)    
    }    
</script>
</head>
<body>    
        <div id="div1">变宽</div>
        <div id="div2">变高</div>      
        <div id="div3"></div>    
        <div id="div4"></div>  
        <div id="div5"></div>  
</body>
</html>
Javascript 相关文章推荐
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 #Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 #Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 #Javascript
解析javascript 实用函数的使用详解
May 10 #Javascript
jQuery拖动图片删除示例
May 10 #Javascript
jquery 提交值不为空的元素示例代码
May 10 #Javascript
JQuery中SetTimeOut传参问题探讨
May 10 #Javascript
You might like
探讨:如何编写PHP扩展
2013/06/13 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
php实现学生管理系统
2020/03/21 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
学生爱国演讲稿
2014/01/14 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers