您正在使用IPV4(3.215.177.171)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】云产品限时秒杀,爆款1核2G云服务      
虚位以待
2021年 国庆节 7
2021年 重阳节 20
2022年 元 旦 99
2022年 春 节 130
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    原生JS实现各种运动之复合运动
    内容摘要: !DOCTYPEhtmlhtmlheadmetahttp-equiv='Content-Type'content='text/html;charset=utf-8'/title原生JS实现各种运动之复合运动/titlestyle#div1{width:100px;height:100px;background:red;opacity:0.3;}/styles......
    <!DOCTYPEhtml>

    <html>


    <head>

    <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

    <title>原生JS实现各种运动之复合运动</title>

    <style>

    #div1{

    width:100px;

    height:100px;

    background:red;

    opacity:0.3;

    }

    </style>

    <script>

    functiongetStyle(obj,attr){

    if(obj.currentStyle){

    returnobj.currentStyle[attr];

    }else{

    returngetComputedStyle(obj,false)[attr];

    }

    }


    functionstartMove(obj,json,fn){

    clearInterval(obj.timer);

    obj.timer=setInterval(function(){

    //设定开关,防止某一个值达到后其它值停止变化

    varbStop=true;

    for(varattrinjson){

    variCur=0;

    if(attr=='opacity'){

    iCur=parseInt(parseFloat(getStyle(obj,attr))*100);

    }else{

    iCur=parseInt(getStyle(obj,attr));

    };

    variSpeed=(json[attr]-iCur)/8;

    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

    //如果某一个值还没有达到,bStop就为false

    if(iCur!=json[attr]){

    bStop=false;

    };

    if(attr=='opacity'){

    obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';

    obj.style.opacity=(iCur+iSpeed)/100;

    }else{

    obj.style[attr]=iCur+iSpeed+'px';

    }

    }


    //最后一轮循环时如果为true,才清除定时器

    if(bStop){

    clearInterval(obj.timer);

    if(fn){

    fn();

    }

    }

    },30)

    }

    </script>

    <script>

    window.onload=function(){


    varoBtn=document.getElementById('btn1');

    varoDiv=document.getElementById('div1');


    oBtn.onclick=function(){


    startMove(oDiv,{

    width:400,

    height:200,

    opacity:100

    });

    };

    };

    </script>

    </head>


    <bodystyle="background:#0F0;">

    <inputid="btn1"type="button"value="开始运动"/>

    <divid="div1"></div>

    </body>


    </html>

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:javascript浏览器用户代理检测脚本实现方法 下一篇:js实时获取窗口大小变化的实例代码
    发布日期:2021/8/24
    手机扫二维码直达本页
    发布时间:8:47:40
    点击:300
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS V6.0.1 Build 21.9.2(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021