/*
　　网上百度的，感觉”从中间到两边“的效果写的不是很好，改了一下，感觉可以了！
*/
<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. [RabbitMQ+Python入门经典] 兔子和兔子窝

    原文联接: http://blogs.digitar.com/jjww/2009/01/rabbits-and-warrens/ RabbitMQ作为一个工业级的消息队列服务器,在其客户端手册列表的P ...

  2. python发邮件实现Redis通知功能

    # -*- coding:utf-8 -*- import smtplib #import os from email.mime.text import MIMEText from email.mim ...

  3. java jstack命令详解

    名称jstack: stack trace 摘要: jstack [ option ] pid jstack [ option ] executable core jstack [ option ] ...

  4. 更改apache网站根目录导致localhost不能访问

    使用xampp或wamp安装完集成环境后,更改apache的网站根目录会导致localhost,localhost/phpmyadmin访问不到. 解决方法: 打开apache的配置文件:“../ap ...

  5. 【转载】解决Windows 10 局域网内共享的问题

    问题: 小米盒子,iPhone (OS 10.2) 无法访问 Win 1o共享 解决方案: 原文链接 http://www.dedoimedo.com/computers/windows-10-net ...

  6. Wix 安装部署教程(十三) -- 多语言安装包

    这几天摸索WIX的多语言安装包(这里是Wix的setup 工程,不是Bundle),终于走通了,感谢网友uni的指点.WIX的多语言安装包能够根据系统环境自动切换界面语言,你也可以通过命令指定语言.下 ...

  7. C#可扩展编程之MEF学习笔记（一）：MEF简介及简单的Demo

    在文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门致力于解决扩展性问题的框架 ...

  8. 犀利的background-clip:text，实现K歌字幕效果

    今天学到了一个新的CSS3属性,更准确的说是属性值,那就是background-clip:text.利用此属性值可以制作出很神奇的效果.可惜只有chrome支持,不过今天可以先来玩玩这个属性. 先来介 ...

  9. FusionCharts简单教程(三)-----FusionCharts的基本属性

          通过前面两章的讲解我们可以制作出简单的图像,但是有时候我们需要对图像进行一个精确的规划,比如设置背景颜色.设置提示信息.设置间隔颜色等等,这时就需要我们对FusionCharts的细节有比 ...

  10. 定时关闭AWS上的EC2机器实例

    最近一段时间在做一个产品从阿里云向亚马逊云中国区迁移的前期试验.亚马逊中国区并没有开放免费体验账号,使用的每一份资源都要实打实的掏钱.而为了实验我们使用时一般要启动好几台EC2实例.为了不浪费辛辛苦苦 ...