<!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. Win7中隐藏的上帝模式——GodMode

    Win7中隐藏的上帝模式——GodMode ~ Windows7中的隐藏模式 ~   随意新建一个文件夹吧,然后重命名为:   GodMode.{ED7BA470-8E54-465E-825C-997 ...

  2. Codevs 3231 小吃

     时间限制: 1 s  空间限制: 16000 KB  题目等级 : 黄金 Gold 题目描述 Description 这里简直是吃货的天堂,小吃太多了.数不胜数. 假设岛上有N种小吃,每种体积Vi, ...

  3. While readingiphone真机无法显示图片，而模拟器可以正常显示

    可能,很多开发IOS程序的遇到过在模拟器里,加载图片都是正常的,但是在真机里就会出现图片资源不能加载的问题. 其中一种原因是,在Simulator里面,例如:图片资源名称为:a.PNG,在代码你里,你 ...

  4. Template、ItemsPanel、ItemContainerStyle、ItemTemplate

    先来看一张图(网上下的图,加了几个字) 1.Template是指控件的样式 在WPF中所有继承自contentcontrol类的控件都含有此属性,(继承自FrameworkElementdl类的Tex ...

  5. [Android教程]TextView使用SpannableString设置复合文本

    TextView通常用来显示普通文本,但是有时候需要对其中某些文本进行样式.事件方面的设置.Android系统通过SpannableString类来对指定文本进行相关处理,具体有以下功能: 1.Bac ...

  6. mongodb的常用操作(二)

    继续mongodb的学习: 9.mongodb条件查询 假设有user集合,里面结构如下:{ "_id" : ObjectId("52ab35d281181f853264 ...

  7. 浅析Mysql 数据回滚错误的解决方法

    介绍一下关于Mysql数据回滚错误的解决方法.需要的朋友可以过来参考下 MYSQL的事务处理主要有两种方法.1.用begin,rollback,commit来实现begin 开始一个事务rollbac ...

  8. 1066. Root of AVL Tree (25)

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  9. 第一个C#应用 【搜索软件】

    搜索软件V1.0 [附软件截图][http://pan.baidu.com/s/1mihEbe4] 设备搜索:支持广播搜索[local search],指定ip[range search]搜索,直接w ...

  10. EHCache 实现通用类 CacheManager

    package com.zhubaje.api.workflow.ehcache; import java.io.Serializable; import java.util.ArrayList; i ...