最近刚好在看之前妙趣网站的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. 顺序表JAVA代码

        publicclassSeqList{       final int defaultSize =10;     //默认的顺序表的最大长度     int maxSize;          ...

  2. 通过源码安装最新版Git

    下载源码 到Git的Github主页上下载最新的源码到本地,解压并进入目录. 编译安装 cd 你的git源码目录 autoconf ./configure make 第一个报错 报错内容: usr/b ...

  3. linux grep常用参数

    # grep [-acinv] [--color=auto] '搜寻字符串' filename选项与参数:-c :计算找到 '搜寻字符串' 的次数-i :忽略大小写的不同,所以大小写视为相同-n :顺 ...

  4. 【转载】python：特殊函数使用方式

    [转载]廖雪峰的官方网站 可变参数 在Python函数中,还可以定义可变参数.顾名思义,可变参数就是传入的参数个数是可变的. 我们以数学题为例子,给定一组数字a,b,c……,请计算a2 + b2 + ...

  5. javascript：运动框架

    function startMove(obj,json,fnEnd) { clearInterval(obj.timer);//清除定时器 obj.timer=setInterval(function ...

  6. sharepoint2013小技巧

    一.创建基于经典认证的应用程序 New-SPWebApplication -Name "Contoso Internet Site" -ApplicationPool " ...

  7. java中保留几位小数

    public class NumUtils { /** * 保留两位小数 * * @param d * @return */ public static String get2Wei(double d ...

  8. ASP.Net页面间传值

    一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交,   <form action= "target.aspx" method = "post&qu ...

  9. xxx is not in the sudoers file. This incident will be reported的解决方法

    1>.进入超级用户模式.也就是输入"su -",系统会让你输入超级用户密码,输入密码后就进入了超级用户模式.(当然,你也可以直接用root用户登录,因为红旗安装过后默认的登录 ...

  10. JavaScript 客户端JavaScript之cookie和客户端持久性

    Document对象都有一个cookie属性,它使得JavaScript代码能够在用户的硬盘上持久地存储数据, 并且能够获取以这种方式存储的数据.客户端持久性是赋予WEB应用程序记忆力的一种简单方法. ...