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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
js实现飞机大战游戏
Aug 26 Javascript
js实现菜单跳转效果
Dec 11 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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
Django之腾讯云短信的实现
2020/06/12 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
2014年小学植树节活动方案
2014/03/02 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
军人离婚协议书样本
2014/10/21 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
老兵退伍感言
2015/08/03 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书