<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title></title>

    <style type="text/css">

        #div1

        {

            width: 200px;

            height: 200px;

            background-color: green;

            filter: alpha(opacity=20);

            opacity: 0.2;

        }

    </style>

    <script type="text/javascript">

        var alpha = 30;

        var timer = null;

        window.onload = function () {

            var oDiv = document.getElementById("div1");

            oDiv.onmouseover = function () {

                Move(100);

            }

            oDiv.onmouseout = function () {

                Move(30);

            }

        }

        function Move(iTarget) {

            var speed = 0;

            clearInterval(timer);

            var oDiv = document.getElementById("div1");

            timer = setInterval(function () {

                if (alpha < iTarget) {

                    speed = -3;

                } else if (alpha == iTarget) {

                    speed = 3;

                }

                //开始变色

                if (alpha == iTarget) {

                    clearInterval(timer);

                } else {

                    alpha += speed;

                    oDiv.style.filter = 'alpha(opacity=' + alpha + ')';

                    oDiv.style.opacity = alpha / 100;

                }

            }, 30);

        }

    </script>

</head>

<body>

    <div id="div1">

    </div>

</body>

</html>

　　

javascript背景淡入淡出的更多相关文章

  1. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  2. JavaScript实现淡入淡出

    <!DOCTYPE html> <html> <head> <title>css动画</title> </head> <b ...

  3. javascript写淡入淡出效果的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JQ淡入淡出效果

    <script type="text/javascript"> //页面淡入淡出 $(document).ready(function() { $('body').hi ...

  5. 背景大图隔几秒切换（非轮播，淡入淡出）--变形金刚joy007 项目总结

    工作日想了好久,周日回家才想出来的... 图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/h ...

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

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

  7. javascript淡入淡出效果的实现思路

    这个思路是最近写XScroll.js类的时候想明白的.平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了.不过经过分析,我觉得其实只需要一半就行了如题,只有思路,没有代码. 这个思 ...

  8. javascript多物体运动案例：多物体淡入淡出

    javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...

  9. 练习：javascript淡入淡出半透明效果

    划过无透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. daxuez.com

    大学z,一个还没想好的名字和项目 初期定位:服务于武汉各大高校的大学学生群体 服务项目:兼职.旅游.培训.租车.班服订做.票务

  2. JavaScript ES7 中使用 async/await 解决回调函数嵌套问题

    原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中, ...

  3. 问题：LVM lvextend增加空间后，df查看还是原来空间

    1.LVM的调整空间大小: #lvextend -L +1300M /dev/mapper/ycgsstore_sdb-wmy #lvdisplay wmy ycgsstore_sdb -wi-ao- ...

  4. centos安装环境准备工作

    我们的centos系统安装好了,并且网络已经连通了,接下来介绍一下,在外网连通的情况下,我们如何安装tar.gz等形式的软件. centos安装后如果想作为正常应用development tools和 ...

  5. iOS获取汉字的拼音

    在iOS开发中经常涉及到汉字的排序,最常见的就是需要根据首字母的字符顺序排列,比如常见的通讯录等.总结出来,大致可以分为两种方法,其中参考文献［1］中提供的方法十分复杂,利用查表的方法是先,并且代码量 ...

  6. Informix 物联网应用示例(转)

    相关概念 MQTT 是一个物联网传输协议,它被设计用于轻量级的发布/订阅式消息传输,旨在为低带宽和不稳定的网络环境中的物联网设备提供可靠的网络服务.MQTT 是专门针对物联网开发的轻量级传输协议.MQ ...

  7. 查看linux系统版本命令

    一.查看内核版本命令: 1) [root@SOR_SYS ~]# cat /proc/version Linux version 2.6.18-238.el5 (mockbuild@x86-012.b ...

  8. ASP.NET MVC4学习笔记路由系统概念与应用篇

    一.概念 1.路由是计算机网络中的一个技术概念,表示把数据包从一个网段转发至另一网段.ASP.NET中的路由系统作用类似,其作用是把请求Url映射到相应的"资源"上,资源可以是一段 ...

  9. WPF中实现Button.Content变化的简易动画

    项目中曾要这样的需求——输入法的切换,要求从English切换到简体中文的时候,Button的Content先从English变成空白,再从空白变成简体中文, 而不是直接从English变成简体中文. ...

  10. 11g RAC R2 之Linux DNS 配置

    在动手配置前,最好先了解下DNS的理论,以免犯不必要的错误.这都是被坑后的觉悟 -_-!!! Oracle 11g RAC 集群中引入了SCAN(SingleClientAccessName)的概念, ...