<!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

JS-运动基础——案例应用：淡入淡出效果的更多相关文章

  1. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  2. 淡入淡出效果的js原生实现

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  3. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  4. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  5. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  6. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  8. 实现Bootstrap Carousel Fade Transition 淡入淡出效果

    html代码: <div id="carousel" class="carousel slide carousel-fade" data-ride=&qu ...

  9. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

  10. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

随机推荐

  1. css 图片文字对齐

    默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐 解决办法:在css中设置图片的vertical-align属性, <img src="" s ...

  2. C++中声明与定义的区别

    如果是指变量的声明和定义: 从编译原理上来说,声明是仅仅告诉编译器,有个某类型的变量会被使用,但是编译器并不会为它分配任何内存.而 定义就是分配了内存.对于下面的两句代码:void Func(){in ...

  3. 轻量级ORM框架Dapper应用六：Dapper支持存储过程

    在Entity Framework中讲解了EF如何支持存储过程,同样,Dapper也支持存储过程,只需要在Query()方法的CommandType中标记使用的是存储过程就可以了.在Users表上面创 ...

  4. mybatis 一对多关系

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  5. nodejs系列笔记02---模块路径解析

    模块路径解析规则 参考这篇博客 我们已经知道,require函数支持斜杠(/)或盘符(C:)开头的绝对路径,也支持./开头的相对路径.但这两种路径在模块之间建立了强耦合关系,一旦某个模块文件的存放位置 ...

  6. easyUI datagrid 排序

    easyUI datagrid 排序 1.首先设置datagrid属性sortName 2.设置sortOrder 3.设置remoteSort(注:此属性默认为true,如果如果是对本地数据排序必须 ...

  7. 一些必看的jQuery导航插件和教程

    导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容.这里最大的部分是开发一个菜单,即要直观易用,又要符合你网站的设计风格.本文列举 ...

  8. 论SparkStreaming的数据可靠性和一致性

    转自: http://www.csdn.net/article/2015-06-21/2825011 摘要:眼下大数据领域最热门的词汇之一便是流计算了,而其中最耀眼的无疑是来自Spark社区的Spar ...

  9. 自然语言交流系统 phxnet团队 创新实训 项目博客 （二）

    基本要求 打开软件,即可进入2D文本交流界面, 软件此时已经连接到服务器,点击文本输入框输入你想说的话,点击发送按钮即可进行交流,点击CHAT和STUDY分别切换到聊天模式或是学习模式,聊天模式是机器 ...

  10. 关于Cocos2d-x属性和引用

    在HelloScene.h文件里面的Private定义一个Size类型的变量visibleSize,然后在HelloScene.cpp里面引用HelloScene.h,再在HelloScene::in ...