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

<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. 使用本地JConsole监控远程JVM (转)

    问题背景   Tomcat经常崩溃crash,想看看JVM内存使用情况,就想到了用Jconsole监控,以前只是监控本地的JVM,这次要监控远程的,遇到了不少问题.   经过几个小时的努力,参考了众多 ...

  2. yum命令详解

    yum(全 称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载 ...

  3. Xcode与OX 版本对照表

    xcode1.0-xcode2.x 版本 OS X运行版本 OS X SDK(s) 1.0 OS X Panther(10.3.x) OS X Puma(10.1.x),OS X Jaguar(10. ...

  4. 使用Object.observe 实现数据绑定

    Object.observe API概述 最近,JavaScript的MVC框架在Web开发届非常盛行.在实现MVC框架的时候,一个非常重要的技术就是数据绑定技术.如果要实现模型与视图的分离,就必须要 ...

  5. LintCode Binary Tree Maximum Path Sum

    Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...

  6. HDU 1796 容斥原理

    How many integers can you find Time Limit: 12000/5000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  7. Quartz在Spring中动态设置cronExpression （spring设置动态定时任务）

    什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定).      这样总不能修改配置文件每定制个定时任务就增加一个trigger吧,即便允许客户 ...

  8. 没接触C++之前与学习了C++之后的思想转变

    我在学习C++之前学习了C,学习C是因为选修时觉得它比较神奇,当时以为学会了C就能纵横计算机领域. 之后听说C++更厉害.并且大多数我这样的男生都喜欢玩游戏,C++又是能编写大型游戏逻辑的语言.于是幻 ...

  9. i++; 与 ++i;的内部区别。

    对于一个用前置自加和后置自加的效果相同的地方,我们应该用哪个呢? 例: for(point i = 0; i != N; ?): 上面for语句中的“?”处,你会在那里写i++还是++i呢? 前置++ ...

  10. Android遇到的错误记录

    解决小米手机无法收到开机广播的问题 http://blog.csdn.net/ksr12333/article/details/16116627 怎样在Android Studio中打开DDMS窗口? ...