zoukankan      html  css  js  c++  java
  • js实现图片加载特效(从左到右,百叶窗,从中间到两边)

    /*
      网上百度的,感觉”从中间到两边“的效果写的不是很好,改了一下,感觉可以了!
    */
    <
    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>
  • 相关阅读:
    Watchguard公司内部招聘:C Developer in Linux Requirements
    条件注释判断浏览器<![if !IE]><![if IE]><![if lt IE 6]><![if gte IE 6]>
    js之事件冒泡和事件捕获详细介绍
    javascript:;与javascript:void(0)使用介绍
    IE和FireFox中JS兼容之event .
    Adobe下周将推新补丁和新的更新模式 狼人:
    微软下周二发布11个补丁 修复25个安全漏洞 狼人:
    安全专家担心Adobe没有足够实力来阻止黑客攻击 狼人:
    保证安全 认清五种易被忽视的攻击方式 狼人:
    六成黑客攻击与PDF漏洞有关 远超微软 狼人:
  • 原文地址:https://www.cnblogs.com/hujunzheng/p/4106523.html
Copyright © 2011-2022 走看看