思想：

其实是运动的一种，就是当鼠标移入div中时，将div的透明度变大，

当鼠标移动出来的时候透明度变回原来。

你可以尝试写一下，不会再看看代码

<style>

    #div1{

        width:200px;height:200px;

        background:red; filter:alpha(opacity:30);opacity:0.3;

        margin:0 auto;

    }

</style>

<body>

<div id="div1">

</div>

</body>

记住透明度有兼容性问题，

js代码如下　

<script>

window.onload=function()

{

    var div1=document.getElementById('div1');

    div1.onmouseover=function()

    {

        startMove(100);

    };

    div1.onmouseout=function()

    {

        startMove(30);

    };

};

    var alpha=30;

    var timer=null;

    function startMove(it)

    {

        var div1=document.getElementById('div1');

        clearInterval(timer);

        timer=setInterval(function()

            {

                var speed=0;    //定义运动的速度

                if (alpha<it)

                {

                    speed=5;

                }

                else

                {

                    speed=-5;

                }

                if (alpha==it)  //若传入的的透明度等于本来的透明度就清除定时器

                {

                    clearInterval(timer);

                }

                else

                {

                    alpha=alpha+speed;

                    div1.style.filter='alpha(opacity:"+alpha+")';

                    div1.style.opacity=alpha/100;

                }

            },30)

    }

</script>

　　

js代码比较简单，不详细解释了，

js实现图片的淡入淡出的更多相关文章

  1. JS实现图片的淡入和淡出的两种方法，如有不足，还请前辈多多指导^-^~

    今天下午练习了下这个图片的淡入淡出小demo,如有不足,还请前辈多多指导^-^~ 总结如下: 第一种方法: 个人觉得第一种方法比较好,同时兼容IE8以下浏览器,但是如下代码中,不知可不可以将timer ...

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

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

  3. 用js或css实现淡入淡出

    淡入淡出?你问我有什么用? 提升首页13格的东西,你居然不知道!! 好啦,不废话了,正文. 1 js 主要元素:fadeIn()   fadeOut() show hide 2 css 主要元素: o ...

  4. js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽

    介绍了那么多运动,這次一套代码实现所有运动 1.html代码和css代码,只是定义一个div <style> div{ width:200px; height:200px; margin: ...

  5. 淡入淡出效果模板 js

    html文件中: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  6. gallery左右滑动时图片淡入淡出

    前几天,公司项目有一个功能要做成滑动图片的淡入淡出,要一边滑动一边改变,所以ViewFlipper左右滑动效果就不能了.网上找了很久,也找不到资料,所以自己写了一个,通过滑动改变imageView的透 ...

  7. js 淡入淡出的图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

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

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

随机推荐

  1. java 深度探险 java 泛型

    Java泛型(generics)是JDK 5中引入的一个新特性,允许在定义类和接口的时候使用类型参数(type parameter).声明的类型参数在使用时用具体的类型来替换.泛型最主要的应用是在JD ...

  2. Ztree使用笔记

    在项目中需要用到树,使用了Ztree.(官网地址:http://www.treejs.cn/v3/main.php#_zTreeInfo,介绍很详细,有API,有demo) 1.初始化树:   $.f ...

  3. windows核心编程---第五章 线程的基础

    与前面介绍的进程一样,线程也有两部分组成.一个是线程内核对象.它是一个数据结构,操作系统用它来管理线程以及用它来存储线程的一些统计信息.另一个是线程栈,用于维护线程执行时所需的所有函数参数和局部变量. ...

  4. echo、print、sprint、sprintf输出

    echo() 函数 定义和用法 echo() 函数输出一个或多个字符串. 语法 echo(strings) 参数 描述 strings 必需.一个或多个要发送到输出的字符串. 提示和注释 注释:ech ...

  5. Caffe 源碼閱讀（三） caffe.cpp

    补:主要函数运行顺序: main>>GetBrewFunction>>train>>Solve 從main函數說起: 1.gflags庫中爲main函數設置usag ...

  6. REDIS key notification

    Commands Clients Documentation Community Download Support License Join us in London October 19th for ...

  7. java中时间类型的问题

    时间类型:System.currentTimeMillis() 获得的是自1970-1-01 00:00:00.000 到当前时刻的时间距离,类型为longimport java.sql.Date d ...

  8. jquery给div,Span, a ，button, radio 赋值取值

    jquery给div的innerHTML赋值 $("#id").html()="test"; //或者 $("#id").html(&quo ...

  9. Erlang 104 OTP

    笔记系列 Erlang环境和顺序编程Erlang并发编程Erlang分布式编程YawsErlang/OTP 日期              变更说明 2014-12-21 A Outline, 1 A ...

  10. 数据库基础知识（1）－－数据库php连接

    关系数据库的常用基本术语  数据data 数据库database 数据库管理系统dbms 表(数据表)table 字段field,列column 行row,记录record 数据库操作的基本模式(流程 ...