/*
　　网上百度的，感觉”从中间到两边“的效果写的不是很好，改了一下，感觉可以了！
*/
<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. 每天记一些php函数，jQuery函数和linux命令（二）

    简介:学习完了php和jQuery之后,对函数的记忆不到位,导致很多函数没记住,所以为了促进自己的记忆,每天花一点时间来写这个博客. 时间:2016-12-19   地点:太原    天气:晴 一.p ...

  2. ubuntu网络配置&&ubuntu apt-get错误解决办法

    网络配置: 方式1:网卡通过DHCP自动获取IP地址 $ sudo gedit /etc/network/interfaces # 修改文件/etc/network/interfaces如下文 #-- ...

  3. 套题 codeforces 361

    A题((Mike and Cellphone) 看起来好像需要模拟数字键位的运动,可是,只要判断出那些必然YES的数字组合不就好了么 #include <cstdio> #include ...

  4. div在Iframe 被遮挡解决方法

    曾经试过在Iframe调试div 未成功 后来从网上看了一个思路 从框架页中调用主框架的js 将所有js方法写到主框架里 //主页方法 function addlframe(url,style)    ...

  5. SQL 数据库性能问题排查

    一个项目的运行,总伴随着性能问题,系统查询过慢,如何快速查询等 下面将简单讲解一下,如何去排查及解决这些问题. 开发过程中: 1:不要绝对的三范式,适当建立冗余能够提高查询速度,不用多表关联 2:能用 ...

  6. 使用Ant自动化我们的java项目生成

    现在我们已经了解如何定义属性.依赖关系以及如何运行ant,接下来我们将学习怎样使用ant编译java源代码并生成jar文件. 编译源代码 由于Ant的主要目标就是生成java应用程序,它内置了java ...

  7. STC12C5A60S2笔记1（管脚定义）

    STC12C5A60S2管脚定义 管脚1:标准IO口P1.0.ADC0 模数转换通道0.CLKOUT2 波特率发生器的时钟输出 管脚2:标准IO口P1.1.ADC1 模数转换通道1 管脚3:标准IO口 ...

  8. TypeScript - Classes

    简介 JavaScript语言基于函数和原型链继承机制的方式构建可重用的组件.这对于OO方面编程来说显得比较笨拙.在下一代的JavaScript标准ECMAScript 6为我们提供了基于class ...

  9. 淘宝code—— 最给力的国内免费SVN(不限语言)，异地团队开发、打造个人开源项目不再是梦

    相信大家都听说过GitHub,也有很多人在用,但是GitHub毕竟在国外,速度不是很给力,而且安装过程也是很漫长.今天来给大家介绍一个国内的免费的开源项目平台,当然也是一个SVN版本控制器,名字叫ta ...

  10. 不插网线，看不到IP的解决办法

    在Windows中,如果不插网线,就看不到IP地址,即使这个块网卡已经绑定了固定IP,原因是操作系统开启了DHCP Media Sense功能,该功能的作用如下: 在一台使用 TCP/IP 的基于 W ...