zoukankan      html  css  js  c++  java
  • JS-运动基础——案例应用:淡入淡出效果

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>淡入淡出</title>
            <style type="text/css">
                .div {
                    width: 100px;
                    height: 100px;
                    background-color: red;
                    margin-top: 50px;
                    position: absolute;
                    left: 100px;
                    top: 0;
                    cursor: pointer;
                    opacity: 0.3;
                    filter: alpha(opacity:30);
                }
            </style>
            <script type="text/javascript">
            window.onload = function(){
                var oDiv = document.getElementById('div');
                oDiv.onmouseover = function(){
                    start(100);
                };
                oDiv.onmouseout = function(){
                    start(30);
                }
            }
                var alpha = 30;//关键点
                var timer =null;
            function start(iTarget){
                var oDiv = document.getElementById('div');
                clearInterval(timer);
                timer = setInterval(function (){
                var speed = 0;
                if(alpha < iTarget){
                    speed = 10;
                }else{
                    speed = -10;
                };
                if(alpha == iTarget){
                    clearInterval(timer)
                }else{
                    alpha+=speed;//关键点——忘了这一句。
                    oDiv.style.filter = 'alpha(opacity:'+alpha+')';
                    oDiv.style.opacity = alpha/100;
                }
            },30);
            }
            
            </script>
        </head>
    
        <body>
            <div class="div" id="div"></div>
        </body>
    
    </html>

    学习路径:智能社的开发教程:https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc

  • 相关阅读:
    debian修改crontab默认编辑器为vim
    正确用DD测试磁盘读写速度
    西数WD2T硬盘分区对齐的方法
    优化UITableView
    登录功能验证处理
    登录注册界面
    navigationbar
    tab bar controller
    ios之coretext
    ios之coredata
  • 原文地址:https://www.cnblogs.com/padding1015/p/6403124.html
Copyright © 2011-2022 走看看