js实现图片加载特效（从左到右，百叶窗，从中间到两边）-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

js实现图片加载特效（从左到右，百叶窗，从中间到两边）

阅读量：7057 次

发布时间：2019-06-28

本文共 2148 字，大约阅读时间需要 7 分钟。

/*

　　网上百度的，感觉”从中间到两边“的效果写的不是很好，改了一下，感觉可以了！

*/

<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 οnlοad="init();">

<h1><input type="button" value="从左到右装载图片" οnclick="startLeftToRight();"/></h1>

<h1><input type="button" value=“从中间到两边加载图片" οnclick="startCenterToOuter();"/></h1>

<h1><input type="button" value="百叶窗方式装载图片" οnclick="startBaiyechuang();"/></h1>

<div>

<canvas id="canvas1" width="400px" height="400px"></canvas>

</div>

</body>

</html>

本文转自小眼儿博客园博客，原文链接：http://www.cnblogs.com/hujunzheng/p/4106523.html，如需转载请自行联系原作者

你可能感兴趣的文章

Android四个存储数据的SharedPreferences

Kafka 客户端实现逻辑分析

Python label for _ 用法

MySQL bin-log与主从服务器

关于异常Microsoft.CSharp.RuntimeBinder.RuntimeBinderException

canvas学习笔记一

mui选择器和dom获取元素的区别（记得把mui对象转为dom对象才能调用用dom方法）...

Windows Mobile 开发系列文章收藏 - 新闻系列

【Android】Mac安装EasyTether导致无法识别设备的问题

JavaScript 日期联动选择器

群用户通过微信小程序可以更好地协作了

从 datetime2 数据类型到 datetime 数据类型的转换产生一个超出范围的值

极客DIY：RFID飞贼打造一款远距离渗透利器

自动性能统计信息（二）（Automatic Performance Statistics）

漏洞真实影响分析，终结网络安全的“狼来了”困境

自制Https证书并在Spring Boot和Nginx中使用(转)

【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物...

阿联酋用阿里云采油，研究成果或将提高原油产量

U-boot mkimage指定Linux内核地址时的两种方式

json树递归js查询json父子节点

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2025-02-07 11:22:09 当前IP: 3.142.135.53 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我