最近刚好在看之前妙趣网站的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. SpringMVC04controller中定义多个方法

    public class MyController extends MultiActionController { // 新增 方法修饰符要是public public ModelAndView ad ...

  2. poj 3671 Dining Cows (Dp)

    /* 一开始并没有想出On的正解 后来发现题解的思路也是十分的巧妙的 还是没能把握住题目的 只有1 2这两个数的条件 dp还带练练啊 ... */ #include<iostream> # ...

  3. JVM 内存分为四大块

    1.栈区 存放函数参数值和局部变量值 2.堆区 3.静态区 4.代码区

  4. JQuery 操作基本控件

    根据控件的样式class获取控件 $(".className")......          //className代表的就是控件的样式 根据控件的ID获取控件 $(" ...

  5. Lua 基础知识-面向对象

    通过函数闭包的方式来实现面向对象 -- 通过函数闭包的方式来实现面向对象 function People(name) local self = {} local function init() sel ...

  6. mysql文件导入到数据库load data infile into table 的使用例子

    load data infile "C:/Users/Administrator/Desktop/1.txt"into table 要一个已经存的表名 字段默认用制表符隔开 文件 ...

  7. oracle PL/SQL程序设计

    declare 说明部分    (变量说明,光标申明,例外说明 ] begin 语句序列   (DML语句]… exception 例外处理语句 End; /

  8. [转]C++强制类型转换

    dynamic_cast:   通常在基类和派生类之间转换时使用,run-time   castconst_cast:   主要针对const和volatile的转换. static_cast:    ...

  9. 国内开源html5游戏引擎全收录

    本文引自<国内开源html5游戏引擎全收录> 游戏开发这潭水太深,英文水平太差,不敢看国外的, 而且这几年国内技术水平也挺高了不少,特别是JS方面.(我个人感觉) 最近看了几个国产的js游 ...

  10. ASP.net 中关于Session的存储信息及其它方式存储信息的讨论与总结

    通过学习和实践笔者总结一下Session 的存储方式.虽然里面的理论众所周知,但是我还是想记录并整理一下.作为备忘录吧.除了ASP.net通过Web.config配置的方式,还有通过其它方式来存储的方 ...