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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器之心

资源 | 从Brain.js到Mind,一文收录11个移动端Javascript机器学习库

选自blog.bitsrc.io 作者:Jonathan Saring 机器之心编译 参与:程耀彤、黄小天 本文作者在构建 Bit 的过程中探索和尝试了把 Ja...

38260
来自专栏机器之心

TensorFlow发布面向JavaScript开发者的机器学习框架TensorFlow.js

机器之心报道 参与:机器之心编辑部 当时时间 3 月 30 日,谷歌 TenosrFlow 开发者峰会 2018 在美国加州石景山开幕,来自全球的机器学习用户围...

412120
来自专栏机器之心

教程 | 如何使用JavaScript实现GPU加速神经网络

选自Towards Data Science 作者:Sebastian Kwiatkowski 机器之心编译 参与:Nurhachu Null、路雪 本文作者 ...

54050
来自专栏王磊的博客

js常用事件整理—兼容所有浏览器

1.鼠标滚动事件。 说明:返回值 大于0向上滚动,小于0向下滚动。 兼容型:所有浏览器。 代码: /*********************** * 函数:...

45690
来自专栏王磊的博客

jquery的扩展方法介绍

  最近一直在写js,这其中也少不了一位js的主角了jQuery,下面介绍的是jQuery的一些扩展,也就是jQuery的扩展方法,jQuery的扩展方法有两种...

430110
来自专栏王磊的博客

nodejs Error: request entity too large解决方案

错误如图: ? 解决方案: app.js添加 var bodyParser = require('body-parser'); app.use(bodyPars...

43860
来自专栏我的博客

js过滤空格

很实用的js函数 function replaceSpace(string) { var temp = ""; string = '' + string; sp...

30730
来自专栏王磊的博客

js获取url地址中的参数

<script type="text/javascript"> function GetQueryString(name) { var ...

31870
来自专栏王磊的博客

JS只能输入数字,数字和字母等的正则表达式

1.只能输入英文   <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 2....

3.2K70
来自专栏王磊的博客

设为首页和收藏本站js代码 兼容IE,chrome,ff

设为首页 和 收藏本站js代码 兼容IE,chrome,ff //设为首页 function SetHome(obj,url){ try{ obj.st...

58790

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励