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

<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. [windows操作系统]windows管理

    1.磁盘管理: 1.1.使用DISKPART命令行工具创建扩展分区: windows自带有一个disk management(磁盘管理)工具,但在其中却找不到如何创建扩展分区(一般MBR分区格式需要扩 ...

  2. <input type="file">中怎设置那个按钮的样式

    最近才开始学习HTML,在练习表单的过程中,发现在使用<input type="file"/>这个类型的元素,产生的文件框和浏览按扭,它们的样式往往不符合我们的需要.怎 ...

  3. phonegap 框架详解

    首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图. 说明:socket server模式下, phonegap.js 源码实现的采用1 毫秒执行一次XHR请求,  当 ...

  4. HDU 3652 B-number

    也是数位dp.考虑反面会简单很多. #include<iostream> #include<cstdio> #include<cstring> #include&l ...

  5. Spring 核心概念以及入门教程

    初始Spring 在学习Spring之前我们首先要了解一下企业级应用.企业级应用是指那些为商业组织,大型企业而创建并部署的解决方案及应用. 这些大型企业级应用的结构复杂,涉及的外部资源众多,事务密集, ...

  6. solr异常解决

    使用solr1.4跟solr3.1时,配置了个唯一id类型是sint 或者int,启动时在tomcat后台就会抛出这个异常: org.apache.solr.common.SolrException: ...

  7. DedeCMS的分页标签pagelist支持中英文的修改方法[转]

    不得不感叹DedeCMS的强大,可定制性和扩展性太强了,就算不懂php也可以很轻松的修改源码. 今天碰到个新问题,用DedeCMS搞了个中英双语的网站,其他的都修改好了,上线之前发现分页条中英文版中都 ...

  8. windows dir改成ls

    习惯了linux下的ls命令,windows的dir用的很不习惯,又不想装cygwin, bash,就想把dir重命名为ls,发现dos下有个命令doskey可以完成该功能.在命令提示符下敲: > ...

  9. xmind的第九天笔记

  10. 利用move_base导航--42

    摘要: 原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 各位博友好长时间又没有写博客了,突然发现上班和在学校是不一样的,在公司的却没有时间写博客了,不过 ...