/*
　　网上百度的，感觉”从中间到两边“的效果写的不是很好，改了一下，感觉可以了！
*/
<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. 从RAM新建QIcon对象 / Create a QIcon from binary data

    一般,QIcon是通过png或ico等图标文件来初始化的,但是如果图标资源已经在内存里了,或者一个zip压缩文件内,可以通过QPixmap作为桥梁,转换为图标. zf = zipfile.ZipFil ...

  2. 利用jmSlip写一个移动端顶部日历选择组件

    可滚动选日期,并限制哪些日期可选和不可选. 主要用来根据后台返回生成一个日期选择器. 具体实现可关注jmslip: https://github.com/jiamao/jmSlip 示例:http:/ ...

  3. Android（5）— Mono For Android 两个功能型外包

    0.前言 距上一篇博文貌似很久了,其中原因种种,归根结底是自己没有坚持好,没有静下心来归纳总结,希望从这一刻起每个月坚持写两篇.(哈哈,突然想起老师说起一句话, 晚上在被窝里悄悄发誓好好学习,第二天涛 ...

  4. mongodb（map-reduce）

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

  5. Java多线程8：wait()和notify()/notifyAll()

    轮询 线程本身是操作系统中独立的个体,但是线程与线程之间不是独立的个体,因为它们彼此之间要相互通信和协作. 想像一个场景,A线程做int型变量i的累加操作,B线程等待i到了10000就打印出i,怎么处 ...

  6. JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

    开发之前需要考虑系统的差异性,比如ios手机没有回退键,所以在开发时一定要考虑二级界面需要有回退键,否则ios的手机就会陷入到这个页面出不去了.安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连 ...

  7. 一个简单的通用Makefile实现

    一个简单的通用Makefile实现   Makefile是Linux下程序开发的自动化编译工具,一个好的Makefile应该准确的识别编译目标与源文件的依赖关系,并且有着高效的编译效率,即每次重新ma ...

  8. Gradle与Gatling脚本集成

    Gatling作为次时代的性能测试工具,由于其API简洁明了.性能出众,越来越受欢迎.但是运行Gatling脚本却有诸多不便,其提供的默认方式不是很方便.考虑到Gatling脚本本质上是Scala类, ...

  9. Technical news July-11

    http://blog.jobbole.com/73300/ 对比Ruby和Python的垃圾回收(2):代式垃圾回收机制 http://www.microsoftvirtualacademy.com ...

  10. webservice2

    按照 当然,里面没写清楚如何配置第三方jar 结果一访问就报错:org.codehaus.xfire.transport.http.XFireConfigurableServlet 4年前就搞过ws的 ...