最近刚好在看之前妙趣网站的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. struts2获取request、session、application

    struts2获取request.session.application public class LoginAction extends ActionSupport implements Reque ...

  2. 手机端input，select屏蔽浏览器默认事件

    文本框input:当文本框focus时会弹出软键盘,有时我们需要click事件而又不想触发focus事件(不要弹出软键盘) 给input添加 disabled="disabled" ...

  3. WCF调用问题

    1---WCF常用的节点绑定 basicHttpBinding和netTcpBinding 当通过Spring对象注入 如 WCFForOrderService 对象注入 public WCFForO ...

  4. Win7启动修复MBR（Win7+Linux删除Linux后进入grub rescue的情况）

    事因:我的笔记本原先同时安装了Win7+Linux,昨天发现硬盘实在不够用(才60G,虽然还有个500G的移动硬盘),就想把里面的Ubuntu格了.都是用虚拟机做测试的多.后来就格了Ubuntu所在的 ...

  5. wininet API调用，检测网络

    [DllImport("wininet")]        private extern static bool InternetGetConnectedState(out int ...

  6. Xaml 页面布局学习

    对于一开始设计xaml界面的初学者,总是习惯性的拖拽控件进行布局,这样也许方便.简单.快捷,但偶尔会出现一些小错误, 当需要将控件进行很细微的挪动时也比较吃力. 这里,我个人建议用一些代码将xaml界 ...

  7. ngrok内网穿透（微信调试：只试用于微信测试账号）

    一.简介 ngrok:https://ngrok.com 功能:就是把外网地址映射到本地的内网地址 缺点: 1.免费版生成的域名是随机的(由于我是用于调试,就没什么关系,如果是正式生产环境可能需要一个 ...

  8. （三）Angularjs - 小实例

    AngularJS处理数据表格 使用 np-repeat 指令 <table> ... <!-- 这里使用ng-repeat指令来重复数据生成表格 --> <tr ng- ...

  9. PHP 过滤二维数组和三维数组

    <?php $arr = [ [1,3,5,7,9], [2,4,6,8,0] ]; $arr2 = [ 'list' => [ [1,3,5,7], [2,4,6,8], [3,2,9, ...

  10. asp.net 防止页面刷新或后退引起重复提交

     项目中经常遇到刷新后重复的向数据库增加一条相同的记录,造成数据重复,如何规避这些问题呢?下面我们就一起讨论一下在asp.net怎样防止页面刷新或后退引起重复提交数据的问题: 其实asp.net防止刷 ...