单个淡入淡出已经写过，可以看看上几遍的博文

<style>

*{

    margin:0;

    padding:0;

}

    div{

        height:100px;

        width:100px;

        background:red;

        margin:0 auto;

        margin-bottom:5px;

        filter:alpha(opacity:30);

        opacity:0.3;

    }

</style>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

js代码如下

带注释

 <script>

 window.onload=function()

 {

     var div=document.getElementsByTagName('div');

     for(var i=0;i<div.length;i++)

     {

         div[i].alpha=30;   //每个div都给透明度30

         div[i].onmouseover=function()  //当鼠标移动到div上时，div的透明度为100

         {

             startMove(this,100)

         }

          div[i].onmouseout=function()  //当鼠标移出div时，div的透明度为30

         {

             startMove(this,30)

         }

     }

 }

     var alpha=30;

     function startMove(obj,iTarget)

     {

         clearInterval(obj.timer);

         obj.timer=setInterval(function()

         {

             var speed=(iTarget-obj.alpha)/10;   //速度是目标的透明度减去div原本的透明度除以10，

             speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度必需上下取整，因为没有浮点的小数透明度

             if(obj.alpha==iTarget)   //如果透明度达到目标的透明度，clear

             {

                 clearInterval(obj.timer);

             }

             else

             {

                 obj.alpha+=speed;

                 obj.style.filter='alpha(opacity:'+alpha+')';  //把alpha赋值给透明度

                 obj.style.opacity=obj.alpha/100;

             }

         }

             , 30)

     }

 </script>

js实现多个图片淡入淡出，框架的更多相关文章

  1. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  2. jQuery实现简单的图片淡入淡出效果

    整体思路: 1.实现页面布局,设置css样式 2.用jQuery获取需要用到的变量 3.用jQuery为两个按钮绑定事件 一.页面布局: <div class="d1"> ...

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

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

  4. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  5. React-Native ListView加载图片淡入淡出效果的组件

    今天练习项目中需要给listview在加载图片时增加一个淡入淡出的效果,因此干脆就自己封装了一个组件: 'use strict' import React from 'react-native' va ...

  6. js中用面向对象的思想——淡入淡出轮播图

    首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换  3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...

  7. iOS-CALayer图片淡入淡出动画

    ]; } - (.f;          CABasicAnimation *boundsAnimation = [CABasicAnimation animationWithKeyPath:, ,  ...

  8. js多物体运动之淡入淡出效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. js笔记----（运动）淡入淡出

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. 【转】 linux下的g++编译器安装

    再debian下直接apt-get install gcc g++就可以了.按照类似的逻辑,再Fedora下yum install gcc g++ 报告无法找到g++包. 查了一下,原来这个包的名字叫 ...

  2. Sql获取第一天、最后一天

    昨天面试一家公司,上机题目中要求获取每月最后一笔订单.用到了日期的选择性查询,回来在ITeye上找到了这篇文章. 原文: http://new-fighter.iteye.com/blog/17587 ...

  3. MySQL字符集乱码

    学数据库,最让人丧气的就是字符集的问题了,一旦出问题,就会有砸电脑的冲动,特别是在修改很多次字符集后依然不成功的时候! 我用的数据库软件是MySQL 5.1.28.最初出问题的时候,是这样的: 情景一 ...

  4. sublime福音：微信小程序组件及API补全插件

    微信自带的编辑器操作起来各种不顺手,调试的时候需要用到,但是编辑的时候还是用自己熟悉的编辑器好一点. 将文件目录导入到sublime,在sublime编辑保存后,回到小程序开发工具刷新页面即可. 下面 ...

  5. 第二个Sprint冲刺事后诸葛亮报告

    用户反馈:计时的填空题难度过大,计时选择题的画面太亮. 用户数量:4 团队改进建议:bug有点多 工作: 主界面 试卷题,是整合以前的内容的 选择题:也是整合以前功能的 初级的 计时题 1.每个成员第 ...

  6. ANSI C中关于FILE流的一些

    ANSI C只是一个定义,定义了一个借口与标准,具体实现将是不同的. 刚看到I/O的时候就对于Stream非常的迷惑,这是什么玩意.后面才明白,这只是一个抽象出来的概念而已.对于一个Stream,它具 ...

  7. HDU 1372 Knight Moves （bfs）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1372 Knight Moves Time Limit: 2000/1000 MS (Java/Othe ...

  8. GridView中的GridView1_RowCommand事件

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

  9. mysql -workbench : Error cause by ' sql-mode = only-full-group-by'

    当mysql出现"only-full-group-by"问题时,是mysql的sql_mode设置出现了问题. 解决: 1.  找到mysql的 my.cnf文件,我的文件路径是: ...

  10. uva147 Dollars ——完全背包

    link:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...