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 相关文章推荐
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
svg动画之动态描边效果
Feb 22 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
深入理解node.js http模块
Jan 24 Javascript
openlayers4实现点动态扩散
Aug 17 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
基于xcache的配置与使用详解
2013/06/18 PHP
PHP文件上传类实例详解
2016/04/08 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
用 Python 制作地球仪的方法
2020/04/24 Python
Python 合并拼接字符串的方法
2020/07/28 Python
如何利用Python 进行边缘检测
2020/10/14 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
品质标语大全
2014/06/21 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Java死锁的排查
2022/05/11 Java/Android
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers