最近刚好在看之前妙趣网站的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. string与stringbuilder的区别

    1.分析string与stringbuilder的区别,我们先来看下面一段代码 首先我们使用string进行字符串的拼接 class Program { static void Main(string ...

  2. CSS 之 margin知识点

    1.margin的百分比值 普通元素的百分比maigin相对于容器元素的宽度(width) 进行计算的. 这里我们在图片外面设置一个宽高分别为800 * 600的容器.设置img{ margin: 1 ...

  3. div中英文无法自动换行的解决办法

    在一个设定好宽度的div中,当我们输入的中文文字长度超过了设定宽度时,会自动换到下一行.   但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致di ...

  4. UITableViewCell实现3D缩放动画

    gif效果图: 代码部分: import UIKit class TableViewController: UITableViewController { override func viewDidL ...

  5. php中双$$与多$$

    <?php$a="b";$b="bbb";$c="ccc";echo $$a;?> 输出结果bbb $a的值为b $$a不是输出 ...

  6. 学习OpenSeadragon之二 (界面缩放与平移规则设置)

    OpenSeadragon入门了解请看第一篇:http://www.cnblogs.com/yingjiehit/p/4362377.html OpenSeadragon给我们提供了很多的可选界面元素 ...

  7. V9 二次开发技术篇之 模型数据库

    应V9粉丝的建议,本人今天讲一下 MVC中的M 数据库模型 首先 在 phpcms\model  建一个模型文件test_model.class.php <?phpdefined('IN_PHP ...

  8. 针对苹果最新审核要求为应用兼容IPv6-备用

    在WWDC2015上苹果宣布iOS9将支持纯IPv6的网络服务.2016年初开始所有提交到App Store的应用必须支持IPv6.为确保现有的应用是兼容的,我们需要注意下面几点. 不建议使用底层的网 ...

  9. 转：Qt项目中遇到的一些小问题汇总

    链接:http://blog.csdn.net/yangyunfeizj/article/details/7082001    作者:GoatYangYang 公司让负责qt界面开发,但是接触qt又不 ...

  10. Android百度地图默认位置中心点设置

    //初始化地图    MapView mMapView = (MapView) findViewById(R.id.map); BaiduMap mBaidumap = mMapView.getMap ...