思想：

其实是运动的一种，就是当鼠标移入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. vs git extensions简单使用方法

    一.准备工具 0.下载Git windows版本下载 http://git-scm.com/download 1.下载Git Extensions.地址http://sourceforge.net/p ...

  2. Python的平凡之路（4）

    一.迭代器&生成器 生成器定义: 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅 ...

  3. ios网络学习------6 json格式数据的请求处理

    ios网络学习------6 json格式数据的请求处理 分类: IOS2014-06-30 20:33 471人阅读 评论(3) 收藏 举报 #import "MainViewContro ...

  4. PCL中的类

    1. PCLBase pcl_base.h中定义了PCL中的基类PCLBase,PCL中的大部分算法都使用了其中的方法. PCLBase实现了点云数据及其索引的定义和访问. 两个主要的变量input_ ...

  5. 从零开始学习Node.js例子一 http get和post

    httpserverrequestget.js /* 获取GET请求内容 由于GET请求直接被嵌入在路径中,URL是完整的请求路径,包括了?后面的部分,因此你可以手动解析后面的内容作为GET请求的参数 ...

  6. Windows下Redis的安装使用

      摘要 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...

  7. TextView 跑马灯

    首先,写一个类,让其继承自TextView: 重写focus方法,让TextView始终是focus. public class MarqueeText extends TextView { publ ...

  8. 防止特殊html字符的问题（xxs攻击）方法

    快速对字符转义,避免跨站攻击XSS   XSS已经成为非常流行的网站攻击方式,为了安全起见,尽量避免用户的输入.可是有些情况下不仅不避免,反而要求鼓励输入,比如写博客.博客园开放性很高,可以运行手写的 ...

  9. OC前15天重点回顾

  10. Generator 函数学习笔记

    // 使用 function* 定义一个 generator 函数 function* helloWorldGenerator() { yield 'hello'; // yield 关键字作为暂停的 ...