/*
　　网上百度的，感觉”从中间到两边“的效果写的不是很好，改了一下，感觉可以了！
*/
<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. LintCode 366 Fibonacci

    /* 1st method will lead to time limit *//* the time complexity is exponential sicne T(n) = T(n-1) + ...

  2. runtime记录

    前言: 最初对于runtime的了解其实只停留在,知道这是一组C的方法,知道消息机制中会把方法调用转成objc_msgSend(theObject,@selector(objectMethod)).随 ...

  3. nginx日志格式来分析网站访问速度与瓶颈

    参考地址:http://www.ttlsa.com/nginx/nginx-modules-ngx_http_log_request_speed/ 查看nginx 安装模块和配置 /usr/local ...

  4. ipv6例子

    一个IPv6通讯的例子 /* sudochen@163.com * * */ #include <stdio.h> #include <string.h> #include & ...

  5. angular2 递归导航菜单实现方式

    看了网上很多源码,基本都是采用循环三级的方式.如果是无限级的菜单,就无法实现了. 菜单格式: [ { "title": "Item-1", "icon ...

  6. 开始VS 2012 中LightSwitch系列的第2部分：感受关爱——定义数据关系

    [原文发表地址]  Beginning LightSwitch in VS 2012 Part 2: Feel the Love - Defining Data Relationships [原文发表 ...

  7. Linux1：Linux概述

    为什么服务器尤其大型服务器都使用Linux系统 服务器尤其是大型服务器一般都使用Linux系统,有以下几点原因: 1.成本低,Linux操作系统是免费的 2.安全性好,Linux采取了许多的安全措施, ...

  8. Guava-Optional可空类型

    接上篇Guava之Joiner和Splitter,本篇将介绍Guava的另外一个有用的对象Optional,这在Java中Google Guava首先给我们提出可空对象模型的.在其他语言如c#这是已经 ...

  9. MySQL--将MySQL数据导入到SQL Server

    随着时代的进步,社会的发展,各种技术层出不穷五花八门乱七八糟数不胜数(写作文呢!!!) 不扯废话,简单而言,很多公司都会同时使用多种数据库,因此数据在不同数据库之间导入导出就成为一个让人蛋疼的问题,对 ...

  10. [每日电路图] 1、基于AT89C52单片机最小系统接口电路【转】

              come from:http://www.21ic.com/dianlu/basis/interface/2015-04-21/621607.htm AT89C52是美国Atmel ...