最近刚好在看之前妙趣网站的javascript 初级运动教程，教程里说设置图片的透明度使用了一个变量。这种方法确实不错，但是燕姐喜欢麻烦。就用自己的理解方法写了一遍。其中也是各种坑。现在先把一个图片的淡入淡出效果代码放出来。

一张图片的淡入淡出##

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    .img01{

        width: 400px;

        height: 400px;

        opacity: 0.3;

        filter: alpha(opacity=30);

    }

  </style>

</head>

<body>

<img class="img01" id="img01" src="1.jpg" alt="">

<script>

/**

 * 使用js匀速运动实现图片的淡入淡出效果

 * 这里没有使用变量而是用了一个更麻烦的方法。其中遇到种种的问题

 * 出错问题点:

 * 1、首先使用getStyle获得行内样式的opacity,注意点这个获得的alpha值其实是一个字符串类型，要转为数值型

 * 2、特别要注意在将值付给opactiy就要这里有一个小数精确的问题: 例如0.1+0.2不等于0.3,解决这个问题可以分别先*10，在除以10

 * 3、timer 原先被我定义在startMove中。当快速移入的时候就会出现闪屏的问题。需要把timer移到外面来。

 */

window.onload = function () {

    var oImg = document.getElementById('img01');

    var alpha = Number(getStyle(oImg,"opacity"));

    oImg.onmouseover = function () {

        startMove(1);

    };

    oImg.onmouseout = function () {

        startMove(0.3);

    };

    var timer = null;

    function startMove (iTarget) {

        var oImg = document.getElementById('img01');

        clearInterval(timer);

        timer = setInterval(function(){

            var speed = 0;

            if( alpha < iTarget ) {

                speed = 0.1;

            }else{

                speed = -0.1;

            }

            if(alpha === iTarget){

                clearInterval(timer);

            }else{

                alpha = (alpha*10 + speed*10)/10;

                oImg.style.opacity = alpha;

                oImg.style.filter = "alpha(opacity="+ alpha*100 +")";

            }

        },30);

    }

    function getStyle (obj, attr) {

        if(window.getComputedStyle){

            return window.getComputedStyle(obj,null)[attr];

        }else{

            return obj.currentStyle[attr];

        }

    }

 };

</script>

</body>

</html>

在做多张图片的淡入淡出的时候也是遇到各种问题。话说我是问题君吗？哭！ 后来实在找不出问题的在哪里，就到 segementfalut上问问题，好心人帮助回答了问题。现在把大神的代码放出来，其中有一篇他自己写的相关文章还不错，推荐给大家

http://www.cnblogs.com/silin6/p/4333999.html

多个图片淡入淡出##

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    *{

        margin: 0;

        padding: 0;

    }

    ul,li{

        list-style: none;

    }

    .imglist {

        width: 1000px;

        height: 400px;

    }

    .imglist ul {

        width: 1000px;

        overflow: hidden;

    }

    .imglist ul li.item {

        width: 200px;

        height: 400px;

        float: left;

        opacity: 0.3;

        filter: alpha(opacity=30);

    }

    .imglist ul li.item img {

        width: 200px;

        height: 400px;

        float: left;

    }

  </style>

</head>

<body>

<div class="imglist">

    <ul id="imglist">

        <li class="item i1"><img src="1.jpg" alt=""></li>

        <li class="item i2"><img src="1.jpg" alt=""></li>

        <li class="item i3"><img src="1.jpg" alt=""></li>

        <li class="item i4"><img src="1.jpg" alt=""></li>

        <li class="item i5"><img src="1.jpg" alt=""></li>

    </ul>

</div>

<script>

window.onload = function () {

   var oImg = document.getElementById('imglist');

   var oImgLi = oImg.getElementsByTagName('li');

//ES5的func

Array.prototype.forEach.call(oImgLi, function (img) {//传递回调函数，构建新的作用域

    //timer、alpha和startMove，不应该被每个li共享使用，因为每个li都有自己的状态，自己的动画状态（自己的动画时长，alpha透明度）

    var timer = null,

        alpha = 0.3;

    function startMove(obj, iTarget) {

        clearInterval(timer);

        timer = setInterval(function () {

            var speed = 0;

            if (alpha < iTarget) {

                speed = 0.1;

            } else {

                speed = -0.1;

            }

            if (alpha === iTarget) {

                clearInterval(timer);

            } else {

                alpha = (alpha * 10 + speed * 10) / 10;

                obj.style.opacity = alpha;

                obj.style.filter = "alpha(opacity=" + alpha * 100 + ")";

            }

        }, 30);

    }

    img.onmouseover = function () {

        startMove(this, 1);

    };

    img.onmouseout = function () {

        startMove(this, 0.3);

    };

});

 };

</script>

</body>

</html>

javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果的更多相关文章

  1. ExtJS简单的动画效果2（ext js淡入淡出特效）

    Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...

  2. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  3. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  4. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  5. jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链

    隐藏和显示 $(selector).hide(speed,callback);  $(selector).show(speed,callback);   可选的 speed 参数规定隐藏/显示的速度, ...

  6. 《JavaScript 实战》：JavaScript 实现图片切割效果

    很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪.图片剪切(设置一下也可以做出放大镜等类似的效果).当时觉得很神奇,碍于水平有限,没做出来.前些日子突然想做一个透镜效果,就突然想到了这 ...

  7. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  8. Javascript兑现图片预加载【回调函数，多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  9. JavaScript之图片操作6

    上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了. 如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续. 主要原理是 ...

随机推荐

  1. Wijmo 日历插件

    说明: 因为项目(OA)的需要,我负责开发日程的模块,相信大家用过谷歌的日历了吧,是不是觉得挺好用,但又苦于无法实现? 这里告诉你一个很好的插件,Wijmo,而里面有一个类似谷歌的日历事件插件,真的很 ...

  2. ZOJ2099

    题意:给多个点,连成折线,求一个矩形可以包含这条折线. 输入: 多组测试数据 多个点的坐标 每组测试数据以0,0结束 以0,0结束程序 输出: 矩形左下角和右上角的坐标 思路:水题,注意输入那里有点坑 ...

  3. hdu 1869

    题意是给m组人物关系,然后判断是否符合六度分离,代码主要就是三个for那里 然后要记得后面判断的时候是大于7,这题除了Florde算法,还有另外一种算法,不过我没记.... #include < ...

  4. <bean id="validator" class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean"/>

    <bean id="validator" class="org.springframework.validation.beanvalidation.LocalVal ...

  5. RecyclerView更通用——listView的onItemClick,onLongItemClick,addHeaderView,addFooterView

    一.点击事件 setOnItemClickListener,setOnItemLongClickListener RecyclerView中虽然没有提供上面这两个接口,但是给我们提供了另外一个接口:O ...

  6. GIt/Github常用命令

    1)git init:初始化本地仓库 2)创建文件:touch read.txt 3)当操作本地的文件时,使用常用的命令,如(mv,ls..)就可以操作,当操作暂存区的文件时需要在命令前家git,并且 ...

  7. c#geckofx文件流下载

    备注:内容仅提供参考. ⒈添加引用:using Gecko; ⒉然后根据自己的情况在某个方法内添加事件: LauncherDialog.Download += new EventHandler< ...

  8. 在eclipse中运行wordcount，控制台打印log4j警告

    log4j:WARN No appenders could be found for logger (org.apache.hadoop.util.Shell).log4j:WARN Please i ...

  9. Android基本组件-Activity

    什么是Activity 在Android程序中,每个Activity继承自android.app.Activity, 有一个与之对应的xml布局文件, 一个界面对应一个Activity, 每个Acti ...

  10. CentOS下安装vsftpd架设ftp服务器

    什么是vsftpd vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序.特点是小巧轻快,安全易用. 首先安装vsftpd这个软件,命令是,yum install vsftpd servi ...