思想：

其实是运动的一种，就是当鼠标移入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. python leetcode 日记--231. Power of Two

    题目: Given an integer, write a function to determine if it is a power of two. class Solution(object): ...

  2. 动态获取Android权限

    @TargetApi(23)private void showPhotoDialog() { if (dialog != null && dialog.isShowing()) { d ...

  3. Android 优化List图片显示

    通常在界面中涉及到大量图片加载的时候都会产生卡顿,因此需要优化 其核心思想就是减少在getView()中的代码量和操作,让其尽可能的轻量化.众多方法最根本的目的是 将一切耗时的操作从getView中抽 ...

  4. OD调试篇10

    今天破解一个用VB写的软件 先记住一个软件PEiD.exe 这是一个可以看出由什么语言编写程序的软件   非常好用 我把今天要破解的软件拖进去了,发现这就是一个用VB写的程序 这些呢是VB破解的关键 ...

  5. JAVA环境安装

    CATALINA_HOME  D:\apache-tomcat-7.0.52CLASSPATH  .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jarJ ...

  6. 处理oracle的死锁

    Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程等操作,那么这些操作是怎么实现的呢?本文我们主要就介绍一下这部分内容.(1)锁表查询的代码有以下的形式:select count( ...

  7. Aspose Word模板使用总结

    Aspose Word模板使用总结 1.创建word模版,使用MergeFeild绑定数据     新建一个Word文档,命名为Template.doc     注意:这里并不是输入"< ...

  8. PAT (Basic Level) Practise：1032. 挖掘机技术哪家强

    [题目链接] 为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第1行给出不超过105的正整数N,即参赛人数.随后N行 ...

  9. [读书笔记]java中的类加载器

    以下内容大多来自周志明的<深入理解Java虚拟机>. 类加载器是java的一项创新,也是java流行的重要原因之一,它最初是为了满足java applet的需求而开发出来. 什么是appl ...

  10. GridView中的GridView1_RowCommand事件

    GridView1_RowCommand事件是GridView中生成事件时激发 比如说页面中有一个按钮给他设置CommandName属性 <asp:Button ID="btnCheH ...