思想：

其实是运动的一种，就是当鼠标移入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. jQuery--checkbox全选

    jQuery.attr  获取/设置对象的属性值,如: $("input[name='chk_list']").attr("checked");     //读 ...

  2. nginx+gunicorn+supervisor+flask @ centos

    /etc/nginx/conf.d/default.conf server { listen 80 default_server; server_name 127.0.0.1; #charset ko ...

  3. JavaScript作用域学习笔记

    重点知识点摘要 一 函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性 其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部 ...

  4. HDU 3006

    http://acm.hdu.edu.cn/showproblem.php?pid=3006 注意到集合内数字最大只有14,状态压缩一下,然后枚举出所有状态 #include <iostream ...

  5. 简介C#读取XML的两种方式

    简介C#读取XML的两种方式 作者: 字体:[增加 减小] 类型:转载 时间:2013-03-03 在程序中访问进而操作XML文件一般有两种模型,分别是使用DOM(文档对象模型)和流模型,使用DOM的 ...

  6. Smart210学习记录----nand flash驱动

    [详解]如何编写Linux下Nand Flash驱动  :http://www.cnblogs.com/linux-rookie/articles/3016990.html 当读写文件请求到来的时候, ...

  7. Java笔记3-for,switch循环,格式化输出,随机数

    大纲:一.分支结构 if switch二.循环 for while do while break continue三.格式化输出 [printf] int score = 100; String na ...

  8. OC前15天重点回顾

  9. win7 下 arp 绑定mac和Ip

    我们都知道直接执行arp -s 命令即可绑定IP和MAC地址,但是在Win7下会遇到不能运行arp -s 进行静态mac绑定的情况,提示“ARP 项添加失败: 拒绝访问.”(英文版提示:The ARP ...

  10. windows端加密程序，lua代码，ZeroBrane调试

    发一个自己改的zerobrane版本(启动中文,快捷键改成和一样:F5启动调试,F9断点,F10逐过程,F11逐语句,F12跳出函数) 在zerobrane 1.0(2015.3.13)发布的基础上改 ...