<!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. [mmc]Linux下MMC/SD/SDIO的识别与操作

    转自:http://blog.csdn.net/skdkjzz/article/details/38927943 我们知道host在扫描卡的过程中,其识别的顺序为SDIO  SD MMC,并且从它的注 ...

  2. 【mybase】绿色版---mybase非常好用的笔记软件

    mybase绿色软件,体积小,解压可以直接使用,PC端非常好用的笔记软件. 包含两个版本: mybase6.5.0 mybase7.0.0 软件下载地址: 链接: http://pan.baidu.c ...

  3. Qt Quick的国际化和本地化

    国际化您的应用程序 以下部分描述了国际化QML源代码的各个方面.如果您对应用程序中的所有用户界面组件都遵循这些指南,则可以针对不同语言和本地文化约定(例如日期和数字的格式化方式)本地化应用程序的各个方 ...

  4. 关于Cocos Studio制作游戏资源

    没想到,Cocos Studio居然是做游戏资源的,而且可以做骨骼动画,虽然我还不会做,只能自己一个人慢慢研究了.学长以前说,Coocs Studio只是用来打包项目成Apk的,没有什么卵用,刚开始我 ...

  5. HttpClient学习之 客户端HTTP编程入门

    说明 本文存在的原因,是想深入的学习下HttpClient.对应的网址是: http://hc.apache.org/httpcomponents-client-4.5.x/primer.html h ...

  6. 美化VC界面(用户登录界面)

    源代码:下载 VC开发程序单调的界面相信大家都是深有感触,提到界面美化编程,人们都会说做界面不要用VC写,太难了.一句俗语:难者不会,会者不难.VC的美化界面编程并没有人们想像的那么难.这篇文章是我写 ...

  7. c++ 的vector、array和数组的比较

    ref:  http://blog.csdn.net/haust_wang/article/details/49848169

  8. js得到当前文档的编码：document.characterSet

    <!DOCTYPE HTML> <html > <head> <meta charset="utf-8"> <!--meta ...

  9. 弹窗插件zDialog使用教程

    1.首先现在好zDialog然后复制项目中 2.配置zDialog解压以后images文件夹位置 images存放位置根据自己实际项目而定,zDialog.js中配置位置即可,如: var IMAGE ...

  10. solr 5.2.1 tomcat 7 配置过程笔记

    因为这个是新版,网上很少这个配置文档,看网上其他的教程弄了很多次,都没有成功,幸亏有这个链接的文档, 才迅速的配置成功,其实是比以前简洁了.因为我的在 linux 上面安装,不方便截图,直接复制修改了 ...