/*
　　网上百度的，感觉”从中间到两边“的效果写的不是很好，改了一下，感觉可以了！
*/
<html>

  <head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type="text/javascript">

        var image;

        var intervalId1;

        var intervalId2;

        var intervalId3;

        var drawW1 = 0;

        var canvas;

        var context;

        var drawLeft;

        var baiyechuangItemW ;

        function init(){

            image = new Image();

            image.src="eg_mouse.jpg";

            canvas = document.getElementById("canvas1");

            context = canvas.getContext("2d");

            drawLeft = image.width/2;

        }

        function startLeftToRight(){

            clearInterval(intervalId1);

            context.clearRect(0,0,image.width,image.height);

            intervalId1 = setInterval("leftToRight();",50);

        }

        function leftToRight(){

            context.drawImage(image,0,0,drawW1, image.height,0,0,drawW1,image.height);

            drawW1 += 2;

            if(drawW1>image.width){

                drawW1 =0;

                clearInterval(intervalId1);

            }

        }

        function centerToOuter(){

            drawW1 += 2;
　　　　　　　//drawLeft-drawW1/2是左端点，drawLeft是中间， drawLeft+drawW1/2是右端点

            context.drawImage(image,drawLeft-drawW1/2,0,drawW1,image.height,drawLeft-drawW1/2,0,drawW1,image.height);

            if(drawW1>drawLeft*2){

                drawW1 = 0;

                clearInterval(intervalId2);

            }

        }

        function startCenterToOuter(){

            clearInterval(intervalId2);

            context.clearRect(0,0,image.width,image.height);

            intervalId2 = setInterval("centerToOuter();",50);

        }

        function baiyechuang(){

            for(i=0;i<10;i++){

                context.drawImage(image,baiyechuangItemW*i,0,drawW1,image.height,baiyechuangItemW*i,0,drawW1,image.height);

            }

            drawW1 += 0.2;

            if(drawW1>baiyechuangItemW){

                clearInterval(intervalId3);

            }

        }

        function startBaiyechuang(){

            drawW1=0;

            baiyechuangItemW = image.width/10.0;

            clearInterval(intervalId3);

            context.clearRect(0,0,image.width,image.height);

            intervalId3 = setInterval("baiyechuang();", 50);

        }

    </script>

  </head>

  <body onload="init();">

      <h1><input type="button" value="从左到右装载图片"  onclick="startLeftToRight();"/></h1>

      <h1><input type="button" value=“从中间到两边加载图片"  onclick="startCenterToOuter();"/></h1>

      <h1><input type="button" value="百叶窗方式装载图片"  onclick="startBaiyechuang();"/></h1>

      <div>

          <canvas id="canvas1" width="400px" height="400px"></canvas>

      </div>

  </body>

</html>

js实现图片加载特效（从左到右，百叶窗，从中间到两边）的更多相关文章

  1. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  2. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  3. js img图片加载失败，重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

  4. （js有关图片加载问题）dom加载完和onload事件

    引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...

  5. JS判断图片加载完成方法

    javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...

  6. js判断图片加载完成

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content=&quo ...

  7. iOS UIWebView 中 js调用OC 打开相册 获取图片， OC调用js 将图片加载到html上

    线上html <!DOCTYPE html> <html> <head> <title>HTML中用JS调用OC方法</title> < ...

  8. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

  9. 图片加载js类库

    Picturefill Picturefill.WP插件利用picturefill.js脚本展示Responsive图片,即根据视口宽度选择尺寸合适的图片加载,节省带宽,提高网站载入速度.例如用户用手 ...

随机推荐

  1. 在Ubuntu下配置舒服的Python开发环境

    Ubuntu 提供了一个良好的 Python 开发环境,但如果想使我们的开发效率最大化,还需要进行很多定制化的安装和配置.下面的是我们团队开发人员推荐的一个安装和配置步骤,基于 Ubuntu 12.0 ...

  2. 关于javascript对象的简单记忆法

    关于javascript对象方法的简单记忆法(个人整理) string对象: 大号小号闪烁加链接./big/small/blink/link/ 粗体斜体打字删除线./bold/italics/fixe ...

  3. maven之上传新的jar包

    今天要求上传若干jar包到maven服务器,师父曾经真的是一步一步点给我看.然后我特喵的忘记了,师父又一步一步点给我看,所以我记录下来,以后留用. 步骤如下,如图所示: 1)先在首页查询下将要上传的j ...

  4. C++混合编程之idlcpp教程Lua篇(7)

    上一篇在这 C++混合编程之idlcpp教程Lua篇(6) 第一篇在这 C++混合编程之idlcpp教程(一) 与LuaTutorial4工程相似,工程LuaTutorial5中,同样加入了四个文件: ...

  5. Cron表达式备忘

    Cron表达式(在Quartz.net里面会用到) 由7段构成:秒 分 时 日 月 星期 年(可选)"-" :表示范围  MON-WED表示星期一到星期三"," ...

  6. 桌面 透明 三角形 分层窗口 DX

    //桌面 透明 三角形 分层窗口 DX //IDirect3DSurface9 GetDC UpdateLayeredWindow #include <Windows.h> #includ ...

  7. SWT: 发起事件 post event

    有很多学习SWT的同志遇到过一类需求,为某些控件添加了诸如MouseListener.KeyListener之类的监听,然后呢,希望使用代码模拟鼠标.键盘来执行点击.按键等操作. 首先说明一点,这是可 ...

  8. ENode 1.0 - 框架的总体目标

    开源地址:https://github.com/tangxuehua/enode 本文想介绍一下enode框架要实现的目标以及部分实现分析思路剖析.总体来说enode框架是一个基于cqrs架构和消息驱 ...

  9. mongodb（map-reduce）

    下例中给出mongoose的一个mapreduce例子,参考mongoose官网. 基本概念: Map函数 接受一个键值对(key-value pair),产生一组中间键值对.MapReduce框架会 ...

  10. Javascript定时器学习笔记

    掌握定时器工作原理必知:JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序. 常言道:setTimeout和setInterval是伪线程. ...