循环展示图片(画中画效果)，页面展示效果就是每次显示两张叠加起来的图片，上面的一张图在下面的图的里面，画面不断的缩小，当下面的一张图缩放到窗口大小时它自己切换成上面的图片，叠加在另一张新加载的图片（下面的图）的上面
最先设计的一版是用JS定时器不断控制HTML中两张图片的大小、定位信息的，为了使其看上去有不间断的变化效果，加上了CSS3过渡的效果，此功能实现的所有HTML/CSS/JS都直接写在页面中的，此方法的复用性不太友好，每次要改的代码处比较多，所以觉得写成插件的形式理为合适，声明后就可以重新设置相应参数，这样就不用再每次找到相应原代码处来进行修改了
所以就写了第二版（插件形式的），可以声明后，重新设置（图片实际宽高尺寸、图片数组、一张图多少步完成变化效果的参数、定时器定时时间、向head中添加的样式），其中图片数组是必须要重新设置的，其它参数不设置情况下就是默认参数
经历了JS定时器不断控制HTML中两张图片的大小、定位信息的切换场景后，移动端测试感觉比较卡，所以又做了第三版CANVAS不断画入两张图（设置大小、位置信息）
第一版（JS定时器不断控制HTML中两张图片的大小、定位信息的，为了使其看上去有不间断的变化效果，加上了CSS3过渡的效果）：
以下贴出代码
第二版插件版（JS定时器不断控制HTML中两张图片的大小、定位信息的，为了使其看上去有不间断的变化效果，加上了CSS3过渡的效果）：
包含JS文件 JsCss3CycleShowImg.js：
或包含JS文件 JsCss3CycleShowImg-min.js：
或包含JS文件 JsCss3CycleShowImg-jm.js：
实例化：
var JsCss3CycleShowImg = new JsCss3CycleShowImg();
以下参数是 可选择性的，不设置会使用默认参数值
JsCss3CycleShowImg.imgMsg = {w:640,h:1138};//所使用图片的实际尺寸，如果使用的图片不是些尺寸，请重新设置
JsCss3CycleShowImg.step = 30;//多少步完成起始至最终 状态的变化
JsCss3CycleShowImg.timerTime = 100;//定时器间隔时间（单位毫秒）
//以下一般要重新定义“按”的按钮样式时重新设置,如果重新设置了JsCss3CycleShowImg.timerTime ，请在JsCss3CycleShowImg.timerTime之后设置
JsCss3CycleShowImg.headStyle = '<style>\
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}\n\
html{ min-width:320px; max-width:640px; margin:0 auto;}\n\
html , body{ display:block; width:100%; height:100%;}\n\
.showDh{ -webkit-transition:all linear ' + JsCss3CycleShowImg.timerTime + 'ms; transition:all linear ' + JsCss3CycleShowImg.timerTime + 'ms;}\n\
#btn{ width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border-radius:50%; background-color:#f00; cursor:pointer; position:absolute; left:50%; margin-left:-25px; bottom:20px;}\
</style>';
以下参数 必须重新设置参数，imgList是所有要展示在页面中的图片（所有图片的位置、宽高信息设置（根据图片 的实际尺寸 设置的），inX ， inY ， inW ， inH 中的值表示上一张图在本张图中（本张图片最终状态时全部显示时）的信息）
JsCss3CycleShowImg.imgList = [
{
imgsrc:'test/1.jpg',
inX:'',
inY:'',
inW:'',
inH:''
},
{
imgsrc:'test/2.jpg',
inX:470,
inY:50,
inW:118,
inH:210
},
{
imgsrc:'test/3.jpg',
inX:86,
inY:561,
inW:195,
inH:346
},
{
imgsrc:'test/4.jpg',
inX:266,
inY:472,
inW:118,
inH:210
},
];
//执行此方法实现功能
JsCss3CycleShowImg.init();
第三版CANVAS不断画入两张图（设置大小、位置信息）：
包含JS文件 CanvasCycleShowImg.js：
或包含JS文件 CanvasCycleShowImg-min.js：
或包含JS文件 CanvasCycleShowImg-jm.js：
实例化：
var CanvasCycleShowImg = new CanvasCycleShowImg();
以下参数是 可选择性的，不设置会使用默认参数值
CanvasCycleShowImg.imgMsg = {w:640,h:1138};//所使用图片的实际尺寸，如果使用的图片不是些尺寸，请重新设置
CanvasCycleShowImg.step = 300;//多少步完成起始至最终 状态的变化
CanvasCycleShowImg.timerTime = 10;//定时器间隔时间（单位毫秒）
//以下一般要重新定义“按”的按钮样式时重新设置
CanvasCycleShowImg.headStyle = '<style>\
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}\n\
html{ min-width:320px; max-width:640px; margin:0 auto;}\n\
html , body{ display:block; width:100%; height:100%;}\n\
#btn{ width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border-radius:50%; background-color:#f00; cursor:pointer; position:absolute; left:50%; margin-left:-25px; bottom:20px;}\
</style>';
以下参数 必须重新设置参数，imgList是所有要展示在页面中的图片（所有图片的位置、宽高信息设置（根据图片 的实际尺寸 设置的），inX ， inY ， inW ， inH 中的值表示上一张图在本张图中（本张图片最终状态时全部显示时）的信息）
CanvasCycleShowImg.imgList = [
{
imgsrc:'test/1.jpg',
inX:'',
inY:'',
inW:'',
inH:''
},
{
imgsrc:'test/2.jpg',
inX:470,
inY:50,
inW:118,
inH:210
},
{
imgsrc:'test/3.jpg',
inX:86,
inY:561,
inW:195,
inH:346
},
{
imgsrc:'test/4.jpg',
inX:266,
inY:472,
inW:118,
inH:210
},
];
//执行此方法实现功能
CanvasCycleShowImg.init();
最先设计的一版是用JS定时器不断控制HTML中两张图片的大小、定位信息的，为了使其看上去有不间断的变化效果，加上了CSS3过渡的效果，此功能实现的所有HTML/CSS/JS都直接写在页面中的，此方法的复用性不太友好，每次要改的代码处比较多，所以觉得写成插件的形式理为合适，声明后就可以重新设置相应参数，这样就不用再每次找到相应原代码处来进行修改了
所以就写了第二版（插件形式的），可以声明后，重新设置（图片实际宽高尺寸、图片数组、一张图多少步完成变化效果的参数、定时器定时时间、向head中添加的样式），其中图片数组是必须要重新设置的，其它参数不设置情况下就是默认参数
经历了JS定时器不断控制HTML中两张图片的大小、定位信息的切换场景后，移动端测试感觉比较卡，所以又做了第三版CANVAS不断画入两张图（设置大小、位置信息）
第一版（JS定时器不断控制HTML中两张图片的大小、定位信息的，为了使其看上去有不间断的变化效果，加上了CSS3过渡的效果）：
以下贴出代码
<!DOCTYPE html>
<html>
<head>
<title>循环展示图片(画中画效果) - test</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<style type="text/css">
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ min-width:320px; max-width:640px; margin:0 auto;}
html , body{ display:block; width:100%; height:100%;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei";
-webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none;
}
#btn{ width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border-radius:50%; background-color:#f00; cursor:pointer; position:absolute; left:50%; margin-left:-25px; bottom:20px;}
#showImg{ width:100%; height:100%; overflow:hidden; position:relative;}
#showImg img{ position:absolute;}
.showDh{ -webkit-transition:all linear .1s; transition:all linear .1s;}
</style>
</head>
<body>
<div id="showImg">
<img id="showImg2" src="imgarr_test/2.jpg" />
<img id="showImg1" src="imgarr_test/1.jpg" />
</div>
<div id="btn">按</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
//所使用图片的实际尺寸
var imgMsg = {w:640,h:1138};
//所有图片的位置、宽高信息设置（根据图片 的实际尺寸 设置的），inX ， inY ， inW ， inH 中的值表示上一张图在本张图中（本张图片最终状态时全部显示时）的信息
var imgList = [
{
imgsrc:'imgarr_test/1.jpg',
inX:'',
inY:'',
inW:'',
inH:''
},
{
imgsrc:'imgarr_test/2.jpg',
inX:470,
inY:50,
inW:118,
inH:210
},
{
imgsrc:'imgarr_test/3.jpg?1.0',
inX:86,
inY:561,
inW:195,
inH:346
},
{
imgsrc:'imgarr_test/4.jpg',
inX:266,
inY:472,
inW:118,
inH:210
},
];
//所有图片声明的数组下标起始
var start = 0;
//所有图片声明的数组下标结束
var end = imgList.length - 2;
//多少步完成起始至最终 状态的变化
var step = 30;
//第1步数
var stepNum = 1;
//页面宽度
//var windowW = $(window).width();
var windowW = $('body').width();
//页面交互时，用户始终只看见两张图，在下面的那一张图片大，在上面的那一张图片小 , 以下方法设置两张图片的 起始、最终 显示状态的 位置、大小 信息
function getPoint(start){
/*
start ===> 第 1 张图（显示在上面的那一张图片），起始状态：其宽度 等于 页面宽度（显示全部），位置信息（左、上都是0）；
最终状态：与页面对比缩小的，位置信息（根据在第 2 张图中定义 的位置信息与页面宽度比例计算显示）
start + 1 ===> 第 2 张图（显示在下面的那一张图片），起始状态：与页面对比放大的，位置信息（根据 第 1 张图最终缩小的位置信息与页面宽度比例计算显示）
最终状态：其宽度 等于 页面宽度（显示全部）,位置信息（左、上都是0）；
以下定义的 x , y , w , h => 在以上数组（imgList）中有设置，为图片对应实际尺寸，表示第 1 张图在第 2 张图中显示的位置及宽高
*/
x = imgList[start + 1].inX;
y = imgList[start + 1].inY;
w = imgList[start + 1].inW;
h = imgList[start + 1].inH;
//第 2 张图的起始状态（放大）比例，也就是 第 1 张图 起始 与 最终 状态的比例 ：图片实际宽 / 图片实际缩小后的宽
var fdbl = imgMsg.w / w;
//第 1 张图的最终状态（缩小）比例，也就是 第 1 张图 最终 与 起始 状态的比例 ：图片实际缩小后的宽 / 图片实际宽
var sxbl = w / imgMsg.w;
/******第 1 张图的 最终 状态的定位信息与宽度设置******/
//页面中图片显示左距(minToX) / 页面宽(windowW) = 图片实际左距(x) / 图片实际宽(imgMsg.w)
var minToX = x / imgMsg.w * windowW;
//页面中图片显示上距(minToY) / 页面宽(windowW) = 图片实际上距(y) / 图片实际宽(imgMsg.w)
var minToY = y / imgMsg.w * windowW;
//其显示是缩小的，宽度 是页面宽度 * 缩小比例
var minToW = windowW * sxbl;
/******第 2 张图的 起始 状态的定位信息与宽度设置******/
//此时第 1 张图的定位信息（左距(minToX)、上距(minToY)）相对于自身小图时要 * 放大比例(fdbl)，第 2 张图的定位信息（左距(maxStartX)、上距(maxStartY)） 等于 左距(minToX * fdbl) 、 上距(minToY * fdbl) 的负数值
var maxStartX = minToX * fdbl * -1;
var maxStartY = minToY * fdbl * -1;
//其显示是放大的，宽度 是页面宽度 * 放大比例
var maxStartW = windowW * fdbl;
//以下罗列两张图的起始、最终 显示位置、宽度 及 显示位置、宽度每一步变化的差值 信息
var point = {
minStartX : 0,
minStartY : 0,
minStartW : windowW,
minToX : minToX,
minToY : minToY,
minToW : minToW,
minStepX : minToX / step,
minStepY : minToY / step,
minStepW : (windowW - minToW) / step,
maxStartX : maxStartX,
maxStartY : maxStartY,
maxStartW : maxStartW,
maxToX : 0,
maxToY : 0,
maxToW : windowW,
maxStepX : maxStartX / step,
maxStepY : maxStartY / step,
maxStepW : (maxStartW - windowW) / step,
};
console.log(point);
return point;
}
//配置初始图片显示状态
function setImgMsg(start){
var ImgMsg = getPoint(start);
$('#showImg2').css({'width':ImgMsg.maxStartW,'left':ImgMsg.maxStartX,'top':ImgMsg.maxStartY}).attr('src',imgList[start + 1].imgsrc);
$('#showImg1').css({'width':ImgMsg.minStartW,'left':ImgMsg.minStartX,'top':ImgMsg.minStartY}).attr('src',imgList[start].imgsrc);
return ImgMsg;
}
$(function(){
var pointMsg = setImgMsg(start);
var imgTimer;
document.getElementById('btn').addEventListener('touchstart',touchStart,false);
document.getElementById('btn').addEventListener('mousedown',touchStart,false);
function touchStart(e){
e.preventDefault();
clearInterval(imgTimer);
imgTimer = setInterval(showDh,100);
}
document.getElementById('btn').addEventListener('touchend',touchEnd,false);
document.getElementById('btn').addEventListener('mouseup',touchEnd,false);
function touchEnd(e){
clearInterval(imgTimer);
}
function showDh(){
if(stepNum > step){
if(start >= end){
return;
}else{
start++;
stepNum = 1;
pointMsg = setImgMsg(start);
}
return;
}else if(stepNum == step){
setTimeout(function(){
console.log(step);
$('#showImg2 , #showImg1').removeClass('showDh');
},100);
}else if(stepNum == 1){
$('#showImg2 , #showImg1').addClass('showDh')
}
console.log(stepNum , start , end);
$('#showImg2').css({'width':pointMsg.maxStartW - stepNum * pointMsg.maxStepW,'left':pointMsg.maxStartX - stepNum * pointMsg.maxStepX,'top':pointMsg.maxStartY - stepNum * pointMsg.maxStepY});
$('#showImg1').css({'width':pointMsg.minStartW - stepNum * pointMsg.minStepW,'left':pointMsg.minStartX + stepNum * pointMsg.minStepX,'top':pointMsg.minStartY + stepNum * pointMsg.minStepY});
stepNum ++;
}
})
</script>
</body>
</html>
第二版插件版（JS定时器不断控制HTML中两张图片的大小、定位信息的，为了使其看上去有不间断的变化效果，加上了CSS3过渡的效果）：
包含JS文件 JsCss3CycleShowImg.js：
/*
JS设置HTML两张图片（图片src、图片宽高、图片位置 等变化）CSS3过渡效果 版循环展示图片(画中画效果)
author 羽筠
2017-07-06
*/
function JsCss3CycleShowImg(){
//所使用图片的实际尺寸
this.imgMsg = {w:640,h:1138};
//所有图片的位置、宽高信息设置（根据图片 的实际尺寸 设置的），inX ， inY ， inW ， inH 中的值表示上一张图在本张图中（本张图片最终状态时全部显示时）的信息
this.imgList = [
{
imgsrc:'1.jpg',
inX:'',
inY:'',
inW:'',
inH:''
},
{
imgsrc:'2.jpg',
inX:470,
inY:50,
inW:118,
inH:210
},
{
imgsrc:'3.jpg',
inX:86,
inY:561,
inW:195,
inH:346
},
{
imgsrc:'4.jpg',
inX:266,
inY:472,
inW:118,
inH:210
},
];
//多少步完成起始至最终 状态的变化
this.step = 30;
//定时器间隔时间（单位毫秒）
this.timerTime = 100;
//添加配置样式及标签元素
//移动端加此样式设置 : html{ min-width:320px; max-width:640px; margin:0 auto;}\
//showDh ： 图片变化时的过渡效果
this.headStyle = '<style>\
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}\n\
html{ min-width:320px; max-width:640px; margin:0 auto;}\n\
html , body{ display:block; width:100%; height:100%;}\n\
.showDh{ -webkit-transition:all linear ' + this.timerTime + 'ms; transition:all linear ' + this.timerTime + 'ms;}\n\
#btn{ width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border-radius:50%; background-color:#f00; cursor:pointer; position:absolute; left:50%; margin-left:-25px; bottom:20px;}\
</style>';
this.showImgEle = '<div id="showImg" style="width:100%; height:100%; overflow:hidden; position:relative;">\
<img id="showImg2" style="position:absolute;" src="" />\
<img id="showImg1" style="position:absolute;" src="" />\
</div>';
this.showImgBtn = '<div id="btn"></div>';
}
JsCss3CycleShowImg.prototype.init = function (){
var headStyle = this.headStyle;
$('head').append(headStyle);
var showImgEle = this.showImgEle;
$('body').prepend(showImgEle);
var showImgBtn = this.showImgBtn;
$('#showImg').after(showImgBtn);
var imgMsg = this.imgMsg;
var imgList = this.imgList;
//所有图片声明的数组下标起始
var start = 0;
//所有图片声明的数组下标结束
var end = imgList.length - 2;
var step = this.step;
//第1步数
var stepNum = 1;
var timerTime = this.timerTime;
//页面宽度
//var windowW = $(window).width();
var windowW = $('body').width();
//页面交互时，用户始终只看见两张图，在下面的那一张图片大，在上面的那一张图片小 , 以下方法设置两张图片的 起始、最终 显示状态的 位置、大小 信息
function getPoint(start){
/*
start ===> 第 1 张图（显示在上面的那一张图片），起始状态：其宽度 等于 页面宽度（显示全部），位置信息（左、上都是0）；
最终状态：与页面对比缩小的，位置信息（根据在第 2 张图中定义 的位置信息与页面宽度比例计算显示）
start + 1 ===> 第 2 张图（显示在下面的那一张图片），起始状态：与页面对比放大的，位置信息（根据 第 1 张图最终缩小的位置信息与页面宽度比例计算显示）
最终状态：其宽度 等于 页面宽度（显示全部）,位置信息（左、上都是0）；
以下定义的 x , y , w , h => 在以上数组（imgList）中有设置，为图片对应实际尺寸，表示第 1 张图在第 2 张图中显示的位置及宽高
*/
x = imgList[start + 1].inX;
y = imgList[start + 1].inY;
w = imgList[start + 1].inW;
h = imgList[start + 1].inH;
//第 2 张图的起始状态（放大）比例，也就是 第 1 张图 起始 与 最终 状态的比例 ：图片实际宽 / 图片实际缩小后的宽
var fdbl = imgMsg.w / w;
//第 1 张图的最终状态（缩小）比例，也就是 第 1 张图 最终 与 起始 状态的比例 ：图片实际缩小后的宽 / 图片实际宽
var sxbl = w / imgMsg.w;
/******第 1 张图的 最终 状态的定位信息与宽度设置******/
//页面中图片显示左距(minToX) / 页面宽(windowW) = 图片实际左距(x) / 图片实际宽(imgMsg.w)
var minToX = x / imgMsg.w * windowW;
//页面中图片显示上距(minToY) / 页面宽(windowW) = 图片实际上距(y) / 图片实际宽(imgMsg.w)
var minToY = y / imgMsg.w * windowW;
//其显示是缩小的，宽度 是页面宽度 * 缩小比例
var minToW = windowW * sxbl;
/******第 2 张图的 起始 状态的定位信息与宽度设置******/
//此时第 1 张图的定位信息（左距(minToX)、上距(minToY)）相对于自身小图时要 * 放大比例(fdbl)，第 2 张图的定位信息（左距(maxStartX)、上距(maxStartY)） 等于 左距(minToX * fdbl) 、 上距(minToY * fdbl) 的负数值
var maxStartX = minToX * fdbl * -1;
var maxStartY = minToY * fdbl * -1;
//其显示是放大的，宽度 是页面宽度 * 放大比例
var maxStartW = windowW * fdbl;
//以下罗列两张图的起始、最终 显示位置、宽度 及 显示位置、宽度每一步变化的差值 信息
var point = {
minStartX : 0,
minStartY : 0,
minStartW : windowW,
minToX : minToX,
minToY : minToY,
minToW : minToW,
minStepX : minToX / step,
minStepY : minToY / step,
minStepW : (windowW - minToW) / step,
maxStartX : maxStartX,
maxStartY : maxStartY,
maxStartW : maxStartW,
maxToX : 0,
maxToY : 0,
maxToW : windowW,
maxStepX : maxStartX / step,
maxStepY : maxStartY / step,
maxStepW : (maxStartW - windowW) / step,
};
console.log(point);
return point;
}
//配置初始图片显示状态
function setImgMsg(start){
var ImgMsg = getPoint(start);
$('#showImg2').css({'width':ImgMsg.maxStartW,'left':ImgMsg.maxStartX,'top':ImgMsg.maxStartY}).attr('src',imgList[start + 1].imgsrc);
$('#showImg1').css({'width':ImgMsg.minStartW,'left':ImgMsg.minStartX,'top':ImgMsg.minStartY}).attr('src',imgList[start].imgsrc);
return ImgMsg;
}
var pointMsg = setImgMsg(start);
var imgTimer;
document.getElementById('btn').addEventListener('touchstart',touchStart,false);
document.getElementById('btn').addEventListener('mousedown',touchStart,false);
function touchStart(e){
e.preventDefault();
clearInterval(imgTimer);
imgTimer = setInterval(showDh,timerTime);
}
document.getElementById('btn').addEventListener('touchend',touchEnd,false);
document.getElementById('btn').addEventListener('mouseup',touchEnd,false);
function touchEnd(e){
clearInterval(imgTimer);
}
function showDh(){
if(stepNum > step){
if(start >= end){
return;
}else{
start++;
stepNum = 1;
pointMsg = setImgMsg(start);
}
return;
}else if(stepNum == step){
setTimeout(function(){
console.log(step);
$('#showImg2 , #showImg1').removeClass('showDh');
},timerTime);
}else if(stepNum == 1){
$('#showImg2 , #showImg1').addClass('showDh')
}
console.log(stepNum , start , end);
$('#showImg2').css({'width':pointMsg.maxStartW - stepNum * pointMsg.maxStepW,'left':pointMsg.maxStartX - stepNum * pointMsg.maxStepX,'top':pointMsg.maxStartY - stepNum * pointMsg.maxStepY});
$('#showImg1').css({'width':pointMsg.minStartW - stepNum * pointMsg.minStepW,'left':pointMsg.minStartX + stepNum * pointMsg.minStepX,'top':pointMsg.minStartY + stepNum * pointMsg.minStepY});
stepNum ++;
}
}
或包含JS文件 JsCss3CycleShowImg-min.js：
/*
JS设置HTML两张图片（图片src、图片宽高、图片位置 等变化）CSS3过渡效果 版循环展示图片(画中画效果)
author 羽筠
2017-07-06
*/
function JsCss3CycleShowImg(){this.imgMsg={w:640,h:1138};this.imgList=[{imgsrc:'1.jpg',inX:'',inY:'',inW:'',inH:''},{imgsrc:'2.jpg',inX:470,inY:50,inW:118,inH:210},{imgsrc:'3.jpg',inX:86,inY:561,inW:195,inH:346},{imgsrc:'4.jpg',inX:266,inY:472,inW:118,inH:210},];this.step=30;this.timerTime=100;this.headStyle='<style>\
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}\n\
html{ min-width:320px; max-width:640px; margin:0 auto;}\n\
html , body{ display:block; width:100%; height:100%;}\n\
.showDh{ -webkit-transition:all linear '+this.timerTime+'ms; transition:all linear '+this.timerTime+'ms;}\n\
#btn{ width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border-radius:50%; background-color:#f00; cursor:pointer; position:absolute; left:50%; margin-left:-25px; bottom:20px;}\
</style>';this.showImgEle='<div id="showImg" style="width:100%; height:100%; overflow:hidden; position:relative;">\
<img id="showImg2" style="position:absolute;" src="" />\
<img id="showImg1" style="position:absolute;" src="" />\
</div>';this.showImgBtn='<div id="btn"></div>';}
JsCss3CycleShowImg.prototype.init=function(){var headStyle=this.headStyle;$('head').append(headStyle);var showImgEle=this.showImgEle;$('body').prepend(showImgEle);var showImgBtn=this.showImgBtn;$('#showImg').after(showImgBtn);var imgMsg=this.imgMsg;var imgList=this.imgList;var start=0;var end=imgList.length-2;var step=this.step;var stepNum=1;var timerTime=this.timerTime;var windowW=$('body').width();function getPoint(start){x=imgList[start+1].inX;y=imgList[start+1].inY;w=imgList[start+1].inW;h=imgList[start+1].inH;var fdbl=imgMsg.w/w;var sxbl=w/imgMsg.w;var minToX=x/imgMsg.w*windowW;var minToY=y/imgMsg.w*windowW;var minToW=windowW*sxbl;var maxStartX=minToX*fdbl* -1;var maxStartY=minToY*fdbl* -1;var maxStartW=windowW*fdbl;var point={minStartX:0,minStartY:0,minStartW:windowW,minToX:minToX,minToY:minToY,minToW:minToW,minStepX:minToX/step,minStepY:minToY/step,minStepW:(windowW-minToW)/step,maxStartX:maxStartX,maxStartY:maxStartY,maxStartW:maxStartW,maxToX:0,maxToY:0,maxToW:windowW,maxStepX:maxStartX/step,maxStepY:maxStartY/step,maxStepW:(maxStartW-windowW)/step,};console.log(point);return point;}
function setImgMsg(start){var ImgMsg=getPoint(start);$('#showImg2').css({'width':ImgMsg.maxStartW,'left':ImgMsg.maxStartX,'top':ImgMsg.maxStartY}).attr('src',imgList[start+1].imgsrc);$('#showImg1').css({'width':ImgMsg.minStartW,'left':ImgMsg.minStartX,'top':ImgMsg.minStartY}).attr('src',imgList[start].imgsrc);return ImgMsg;}
var pointMsg=setImgMsg(start);var imgTimer;document.getElementById('btn').addEventListener('touchstart',touchStart,false);document.getElementById('btn').addEventListener('mousedown',touchStart,false);function touchStart(e){e.preventDefault();clearInterval(imgTimer);imgTimer=setInterval(showDh,timerTime);}
document.getElementById('btn').addEventListener('touchend',touchEnd,false);document.getElementById('btn').addEventListener('mouseup',touchEnd,false);function touchEnd(e){clearInterval(imgTimer);}
function showDh(){if(stepNum>step){if(start>=end){return;}else{start++;stepNum=1;pointMsg=setImgMsg(start);}
return;}else if(stepNum==step){setTimeout(function(){console.log(step);$('#showImg2 , #showImg1').removeClass('showDh');},timerTime);}else if(stepNum==1){$('#showImg2 , #showImg1').addClass('showDh')}
console.log(stepNum,start,end);$('#showImg2').css({'width':pointMsg.maxStartW-stepNum*pointMsg.maxStepW,'left':pointMsg.maxStartX-stepNum*pointMsg.maxStepX,'top':pointMsg.maxStartY-stepNum*pointMsg.maxStepY});$('#showImg1').css({'width':pointMsg.minStartW-stepNum*pointMsg.minStepW,'left':pointMsg.minStartX+stepNum*pointMsg.minStepX,'top':pointMsg.minStartY+stepNum*pointMsg.minStepY});stepNum++;}}
或包含JS文件 JsCss3CycleShowImg-jm.js：
/*
JS设置HTML两张图片（图片src、图片宽高、图片位置 等变化）CSS3过渡效果 版循环展示图片(画中画效果)
author 羽筠
2017-07-06
*/
eval(function(h,g,l,k,j,i){if(j=function(b){return(g>b?"":j(parseInt(b/g)))+((b%=g)>35?String.fromCharCode(b+29):b.toString(36))},!"".replace(/^/,String)){for(;l--;){i[j(l)]=k[l]||j(l)}k=[function(b){return i[b]}],j=function(){return"\\w+"},l=1}for(;l--;){k[l]&&(h=h.replace(new RegExp("\\b"+j(l)+"\\b","g"),k[l]))}return h}("5k(5a(p,a,c,k,e,d){e=5a(c){5b(c<a?'':e(5m(c/a)))+((c=c%a)>35?5c.5j(c+29):c.5h(36))};5f(!''.5d(/^/,5c)){5e(c--){d[e(c)]=k[c]||e(c)}k=[5a(e){5b d[e]}];e=5a(){5b'\\\\w+'};c=1};5e(c--){5f(k[c]){p=p.5d(5i 5g('\\\\b'+e(c)+'\\\\b','g'),k[c])}}5b p}('52(2z(p,a,c,k,e,d){e=2z(c){2y(c<a?\\'\\':e(2V(c/a)))+((c=c%a)>35?2C.3u(c+29):c.3r(36))};2A(!\\'\\'.2D(/^/,2C)){2B(c--){d[e(c)]=k[c]||e(c)}k=[2z(e){2y d[e]}];e=2z(){2y\\'\\\\\\\\w+\\'};c=1};2B(c--){2A(k[c]){p=p.2D(3s 3t(\\'\\\\\\\\b\\'+e(c)+\\'\\\\\\\\b\\',\\'g\\'),k[c])}}2y p}(\\'f 1n(){6.i={w:1N,h:1W};6.b=[{p:\\\\\\'1.H\\\\\\',A:\\\\\\'\\\\\\',t:\\\\\\'\\\\\\',u:\\\\\\'\\\\\\',v:\\\\\\'\\\\\\'},{p:\\\\\\'2.H\\\\\\',A:1Y,t:1c,u:1z,v:1v},{p:\\\\\\'3.H\\\\\\',A:1Z,t:1X,u:1I,v:1E},{p:\\\\\\'4.H\\\\\\',A:1H,t:1K,u:1z,v:1v},];6.a=1G;6.j=s;6.P=\\\\\\'<r>\\\\\\\\*{1e:1w;1F:1w;1B-21:1i-1B;-1p-1O-1R-1a:1S(0,0,0,0)}1o{1T-c:1Q;1P-c:1V;1e:0 20}1o,Z{22:1L;c:s%;M:s%}.C{-1p-1h:\\\\\\' + 6.j + \\\\\\'1m 1g 1k;1h:\\\\\\' + 6.j + \\\\\\'1m 1g 1k}#k{c:17;M:17;1J-M:17;1M-1D:1U;1a:#27;1i-2p:1c%;2q-1a:#2o;2n:2k;L:14;o:1c%;1e-o:-2l;2m:2s}</r>\\\\\\';6.K=\\\\\\'<O N=\"1j\"r=\"c:s%; M:s%; 2v:2x; L:2w;\">\\\\\\\\<1l N=\"D\"r=\"L:14;\"I=\"\"/>\\\\\\\\<1l N=\"B\"r=\"L:14;\"I=\"\"/>\\\\\\\\</O>\\\\\\';6.J=\\\\\\'<O N=\"k\"></O>\\\\\\'}1n.23.2t=f(){5 P=6.P;$(\\\\\\'2u\\\\\\').2r(P);5 K=6.K;$(\\\\\\'Z\\\\\\').2i(K);5 J=6.J;$(\\\\\\'#1j\\\\\\').2j(J);5 i=6.i;5 b=6.b;5 7=0;5 18=b.29-2;5 a=6.a;5 9=1;5 j=6.j;5 d=$(\\\\\\'Z\\\\\\').c();f 1s(7){x=b[7+1].A;y=b[7+1].t;w=b[7+1].u;h=b[7+1].v;5 F=i.w/w;5 1r=w/i.w;5 q=x/i.w*d;5 z=y/i.w*d;5 G=d*1r;5 m=q*F*-1;5 n=z*F*-1;5 l=d*F;5 13={10:0,Y:0,15:d,q:q,z:z,G:G,1y:q/a,1f:z/a,1C:(d-G)/a,m:m,n:n,l:l,25:0,2a:0,2g:d,1u:m/a,1x:n/a,1A:(l-d)/a,};1b.1d(13);W 13}f 12(7){5 g=1s(7);$(\\\\\\'#D\\\\\\').S({\\\\\\'c\\\\\\':g.l,\\\\\\'o\\\\\\':g.m,\\\\\\'E\\\\\\':g.n}).1t(\\\\\\'I\\\\\\',b[7+1].p);$(\\\\\\'#B\\\\\\').S({\\\\\\'c\\\\\\':g.15,\\\\\\'o\\\\\\':g.10,\\\\\\'E\\\\\\':g.Y}).1t(\\\\\\'I\\\\\\',b[7].p);W g}5 8=12(7);5 V;R.X(\\\\\\'k\\\\\\').T(\\\\\\'2h\\\\\\',19,U);R.X(\\\\\\'k\\\\\\').T(\\\\\\'2f\\\\\\',19,U);f 19(e){e.2e();1q(V);V=2c(C,j)}R.X(\\\\\\'k\\\\\\').T(\\\\\\'2d\\\\\\',11,U);R.X(\\\\\\'k\\\\\\').T(\\\\\\'28\\\\\\',11,U);f 11(e){1q(V)}f C(){Q(9>a){Q(7>=18){W}16{7++;9=1;8=12(7)}W}16 Q(9==a){2b(f(){1b.1d(a);$(\\\\\\'#D , #B\\\\\\').26(\\\\\\'C\\\\\\')},j)}16 Q(9==1){$(\\\\\\'#D , #B\\\\\\').24(\\\\\\'C\\\\\\')}1b.1d(9,7,18);$(\\\\\\'#D\\\\\\').S({\\\\\\'c\\\\\\':8.l-9*8.1A,\\\\\\'o\\\\\\':8.m-9*8.1u,\\\\\\'E\\\\\\':8.n-9*8.1x});$(\\\\\\'#B\\\\\\').S({\\\\\\'c\\\\\\':8.15-9*8.1C,\\\\\\'o\\\\\\':8.10+9*8.1y,\\\\\\'E\\\\\\':8.Y+9*8.1f});9++}}\\',3v,3x,\\'|||||3w|3q|3p|3j|3i|3h|3k|3l|3o||2z|3n||3m|3y|3z|3M|3L|3K|3N|3O|3Q|3P|3J|3I|3C|3B||||3A|3D|3E|3H|3g|3F|3R|39|3S|2O|2N|2M|2P|2Q|2S|2L|2T|2A|2I|2F|2E|2G|2K|2y|2J|2H|2R|3f|3a|2U|38|3b|3c|3e|3d|37|34|2X|2W|50|2Y|2Z|33|32|31|3G|4g|4I|4H|4K|4Q|4L|4O|4N|4M|4G|4F|4z|4y|4x|4A|4B|4E|4D|4C|4P|4X|58|54|30|53|55|56|57|59|4Z|4T|4S|4R|4U|4V|51|4Y|4W|4J|4v|45|44|43|46|47|4a|49|48|42|41|3V|3U|3T|3W|3X|40|3Z|3Y|4b|4c|4p|4o|4n|4q|4r|4u|4t|4s|4m|4l|4f|4e|4d|4w|4h|4k|4j\\'.4i(\\'|\\'),0,{}))',62,6t,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||5b|5a|5f|5e|5c|5d|64|63|66|67|69|68|61|60|5V|5U|5T|5W|5X|5Z|5Y|6a|6b|5m|6n|6m|6l|6o||6p|6r|6q|6k|||6j|6e|6d|6c|5S|6g|6i|6h|6s|5K|5u|5t|5s|5v|5r|5y|5x|5z|5o|5n|5h|5i|5g|5j|62|5q|5p|5w|5R|5M|5L|5A|5N|5O|5Q|5P|5J|5I|5D|5C|5B|5E|5F|5H|5G|6f|6T|7C|7j|7i|7l|7m|7o|7n|7h|7g|7a|7q|79|78|7b|7c|7f|7e|7d|7p|7x|7F|7B|7E|7G|7I|7H|5l|7D|7z|7t|7s|7r|7u|7v|7y|7A|7w|7k|76|6G|6F|6E|6H|6I|6L|6K|6J|6D|6C|6w|6v|6u|6x|6y|6B|6A|6z|6M|6N|70|6Z|6Y|71|72|75|74|73|6X|6W|6Q||6P|5k|6O|6R|6S|6V|6U|77|65'.5l('|'),0,{}))",62,479,"||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function|return|String|replace|while|if|RegExp|toString|new|fromCharCode|eval|split|parseInt|this|start|158|var|width|pointMsg|stepNum|step|imgList|timerTime|ImgMsg|imgMsg|windowW|inW|maxStartX|maxStartY|100|maxStartW|left|style|imgsrc|inY|showDh|showImg2|inH|minToY|inX|showImg1|border|top|btn|absolute|src|showImgBtn|showImgEle|position|height|id|body|div|imgTimer||css|addEventListener|block|false|minStartY|getElementById|document|headStyle|setImgMsg|touchEnd|minToW|point|minToX|minStartW|else|50px|end|touchStart|log|color|console|margin|transition|minStepY|all|minStartX|320|img|getPoint|attr|linear|640px|sxbl|html|ms|118|maxStepW|0px|head|1138|210|maxStepX|box|minStepX|maxStepY|clearInterval|webkit|266|rgba|text|padding|195|fdbl|472|line|min|align|max|JsCss3CycleShowImg|minStepW|tap|640|center|highlight|320px|bottom|346|470|86|removeClass|561|auto|prototype|addClass|sizing|setInterval|touchend|mouseup|length|cursor|fff|maxToY|preventDefault|setTimeout|display|maxToX|after|radius|background|prepend|touchstart|f00|mousedown|pointer|relative|25px|init|jpg|hidden|20px|maxToW|append|overflow|showImg".split("|"),0,{}));
实例化：
var JsCss3CycleShowImg = new JsCss3CycleShowImg();
以下参数是 可选择性的，不设置会使用默认参数值
JsCss3CycleShowImg.imgMsg = {w:640,h:1138};//所使用图片的实际尺寸，如果使用的图片不是些尺寸，请重新设置
JsCss3CycleShowImg.step = 30;//多少步完成起始至最终 状态的变化
JsCss3CycleShowImg.timerTime = 100;//定时器间隔时间（单位毫秒）
//以下一般要重新定义“按”的按钮样式时重新设置,如果重新设置了JsCss3CycleShowImg.timerTime ，请在JsCss3CycleShowImg.timerTime之后设置
JsCss3CycleShowImg.headStyle = '<style>\
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}\n\
html{ min-width:320px; max-width:640px; margin:0 auto;}\n\
html , body{ display:block; width:100%; height:100%;}\n\
.showDh{ -webkit-transition:all linear ' + JsCss3CycleShowImg.timerTime + 'ms; transition:all linear ' + JsCss3CycleShowImg.timerTime + 'ms;}\n\
#btn{ width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border-radius:50%; background-color:#f00; cursor:pointer; position:absolute; left:50%; margin-left:-25px; bottom:20px;}\
</style>';
以下参数 必须重新设置参数，imgList是所有要展示在页面中的图片（所有图片的位置、宽高信息设置（根据图片 的实际尺寸 设置的），inX ， inY ， inW ， inH 中的值表示上一张图在本张图中（本张图片最终状态时全部显示时）的信息）
JsCss3CycleShowImg.imgList = [
{
imgsrc:'test/1.jpg',
inX:'',
inY:'',
inW:'',
inH:''
},
{
imgsrc:'test/2.jpg',
inX:470,
inY:50,
inW:118,
inH:210
},
{
imgsrc:'test/3.jpg',
inX:86,
inY:561,
inW:195,
inH:346
},
{
imgsrc:'test/4.jpg',
inX:266,
inY:472,
inW:118,
inH:210
},
];
//执行此方法实现功能
JsCss3CycleShowImg.init();
第三版CANVAS不断画入两张图（设置大小、位置信息）：
包含JS文件 CanvasCycleShowImg.js：
/*
JS不断向CANVAS中画入两张图片（画入的图片src、画入的图片宽高、画入的的图片位置 等变化） 版循环展示图片(画中画效果)
author 羽筠
2017-07-05
*/
function CanvasCycleShowImg(){
//所使用图片的实际尺寸
this.imgMsg = {w:640,h:1138};
//所有图片的位置、宽高信息设置（根据图片 的实际尺寸 设置的），inX ， inY ， inW ， inH 中的值表示上一张图在本张图中（本张图片最终状态时全部显示时）的信息
this.imgList = [
{
imgsrc:'1.jpg',
inX:'',
inY:'',
inW:'',
inH:''
},
{
imgsrc:'2.jpg',
inX:470,
inY:50,
inW:118,
inH:210
},
{
imgsrc:'3.jpg',
inX:86,
inY:561,
inW:195,
inH:346
},
{
imgsrc:'4.jpg',
inX:266,
inY:472,
inW:118,
inH:210
},
];
//多少步完成起始至最终 状态的变化
this.step = 300;
//定时器间隔时间（单位毫秒）
this.timerTime = 10;
//添加配置样式及标签元素
//移动端加此样式设置 : html{ min-width:320px; max-width:640px; margin:0 auto;}\
this.headStyle = '<style>\
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}\n\
html{ min-width:320px; max-width:640px; margin:0 auto;}\n\
html , body{ display:block; width:100%; height:100%;}\n\
#btn{ width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border-radius:50%; background-color:#f00; cursor:pointer; position:absolute; left:50%; margin-left:-25px; bottom:20px;}\
</style>';
this.showImgEle = '<div id="showImg" style=" width:100%; height:100%; overflow:hidden; position:relative;">\
<canvas id="showImgCanvas" style=" width:100%; position:absolute; left:0; top:0;" />\
</div>';
this.showImgBtn = '<div id="btn"></div>';
}
CanvasCycleShowImg.prototype.init = function (){
var headStyle = this.headStyle;
$('head').append(headStyle);
var showImgEle = this.showImgEle;
$('body').prepend(showImgEle);
var showImgBtn = this.showImgBtn;
$('#showImg').after(showImgBtn);
var imgMsg = this.imgMsg;
var imgList = this.imgList;
//所有图片声明的数组下标起始
var start = 0;
//所有图片声明的数组下标结束
var end = imgList.length - 2;
var step = this.step;
//第1步数
var stepNum = 1;
var timerTime = this.timerTime;
//页面交互时，用户始终只看见两张图，在下面的那一张图片大，在上面的那一张图片小 , 以下方法设置两张图片的 起始、最终 显示状态的 位置、大小 信息
function getPoint(start){
/*
start ===> 第 1 张图（显示在上面的那一张图片）
start + 1 ===> 第 2 张图（显示在下面的那一张图片）
以下定义的 x , y , w , h => 在以上数组（imgList）中有设置，为图片对应实际尺寸，表示第 1 张图在第 2 张图中显示的位置及宽高
*/
x = imgList[start + 1].inX;
y = imgList[start + 1].inY;
w = imgList[start + 1].inW;
h = imgList[start + 1].inH;
//第 2 张图的起始状态（放大）比例，也就是 第 1 张图 起始 与 最终 状态的比例 ：图片实际宽 / 图片实际缩小后的宽
var fdbl = imgMsg.w / w;
//第 1 张图的最终状态（缩小）比例，也就是 第 1 张图 最终 与 起始 状态的比例 ：图片实际缩小后的宽 / 图片实际宽
var sxbl = w / imgMsg.w;
/******第 1 张图的 最终 状态的定位信息与宽高设置******/
var minToX = x;
var minToY = y;
var minToW = w;
var minToH = h;
/******第 2 张图的 起始 状态的定位信息与宽高设置******/
var maxStartX = minToX * fdbl * -1;
var maxStartY = minToY * fdbl * -1;
var maxStartW = imgMsg.w * fdbl;
var maxStartH = imgMsg.h * fdbl;
var point = {
minStartX : 0,
minStartY : 0,
minStartW : imgMsg.w,
minStartH : imgMsg.h,
minToX : minToX,
minToY : minToY,
minToW : minToW,
minToH : minToH,
minStepX : minToX / step,
minStepY : minToY / step,
minStepW : (imgMsg.w - minToW) / step,
minStepH : (imgMsg.h - minToH) / step,
maxStartX : maxStartX,
maxStartY : maxStartY,
maxStartW : maxStartW,
maxStartH : maxStartH,
maxToX : 0,
maxToY : 0,
maxToW : imgMsg.w,
maxToH : imgMsg.h,
maxStepX : maxStartX / step,
maxStepY : maxStartY / step,
maxStepW : (maxStartW - imgMsg.w) / step,
maxStepH : (maxStartH - imgMsg.h) / step,
};
console.log(point);
return point;
}
//画图
var showImgCanvas = document.getElementById("showImgCanvas");
var showImgCanvas_2d = showImgCanvas.getContext("2d");
showImgCanvas.width = imgMsg.w;
showImgCanvas.height = imgMsg.h;
var img2,img1;
function drawImg(imgsrc1,w1,h1,x1,y1,imgsrc2,w2,h2,x2,y2){
showImgCanvas_2d.clearRect(0,0,imgMsg.w,imgMsg.h);
if(imgsrc1 && imgsrc2){
img2 = new Image();
img2.src = imgsrc2;
img2.onload = function(){
showImgCanvas_2d.drawImage(img2,x2,y2,w2,h2);
img1 = new Image();
img1.src = imgsrc1;
img1.onload = function(){
showImgCanvas_2d.drawImage(img1,x1,y1,w1,h1);
}
}
}else{
showImgCanvas_2d.restore();
showImgCanvas_2d.drawImage(img2,x2,y2,w2,h2);
showImgCanvas_2d.drawImage(img1,x1,y1,w1,h1);
}
}
//配置初始图片显示状态
function setImgMsg(start){
var ImgMsg = getPoint(start);
drawImg(imgList[start].imgsrc , ImgMsg.minStartW , ImgMsg.minStartH , ImgMsg.minStartX , ImgMsg.minStartY , imgList[start + 1].imgsrc , ImgMsg.maxStartW , ImgMsg.maxStartH , ImgMsg.maxStartX , ImgMsg.maxStartY);
return ImgMsg;
}
var pointMsg = setImgMsg(start);
var imgTimer;
document.getElementById('btn').addEventListener('touchstart',touchStart,false);
document.getElementById('btn').addEventListener('mousedown',touchStart,false);
function touchStart(e){
e.preventDefault();
clearInterval(imgTimer);
imgTimer = setInterval(showDh,timerTime);
}
document.getElementById('btn').addEventListener('touchend',touchEnd,false);
document.getElementById('btn').addEventListener('mouseup',touchEnd,false);
function touchEnd(e){
clearInterval(imgTimer);
}
function showDh(){
if(stepNum > step){
if(start >= end){
return;
}else{
start++;
stepNum = 1;
pointMsg = setImgMsg(start);
}
return;
}
console.log(stepNum , start , end);
drawImg('' , pointMsg.minStartW - stepNum * pointMsg.minStepW , pointMsg.minStartH - stepNum * pointMsg.minStepH , pointMsg.minStartX + stepNum * pointMsg.minStepX , pointMsg.minStartY + stepNum * pointMsg.minStepY , '', pointMsg.maxStartW - stepNum * pointMsg.maxStepW , pointMsg.maxStartH - stepNum * pointMsg.maxStepH , pointMsg.maxStartX - stepNum * pointMsg.maxStepX , pointMsg.maxStartY - stepNum * pointMsg.maxStepY);
stepNum ++;
}
}
或包含JS文件 CanvasCycleShowImg-min.js：
/*
JS不断向CANVAS中画入两张图片（画入的图片src、画入的图片宽高、画入的的图片位置 等变化） 版循环展示图片(画中画效果)
author 羽筠
2017-07-05
*/
function CanvasCycleShowImg(){this.imgMsg={w:640,h:1138};this.imgList=[{imgsrc:'1.jpg',inX:'',inY:'',inW:'',inH:''},{imgsrc:'2.jpg',inX:470,inY:50,inW:118,inH:210},{imgsrc:'3.jpg',inX:86,inY:561,inW:195,inH:346},{imgsrc:'4.jpg',inX:266,inY:472,inW:118,inH:210},];this.step=300;this.timerTime=10;this.headStyle='<style>\
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}\n\
html{ min-width:320px; max-width:640px; margin:0 auto;}\n\
html , body{ display:block; width:100%; height:100%;}\n\
#btn{ width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border-radius:50%; background-color:#f00; cursor:pointer; position:absolute; left:50%; margin-left:-25px; bottom:20px;}\
</style>';this.showImgEle='<div id="showImg" style=" width:100%; height:100%; overflow:hidden; position:relative;">\
<canvas id="showImgCanvas" style=" width:100%; position:absolute; left:0; top:0;" />\
</div>';this.showImgBtn='<div id="btn"></div>';}
CanvasCycleShowImg.prototype.init=function(){var headStyle=this.headStyle;$('head').append(headStyle);var showImgEle=this.showImgEle;$('body').prepend(showImgEle);var showImgBtn=this.showImgBtn;$('#showImg').after(showImgBtn);var imgMsg=this.imgMsg;var imgList=this.imgList;var start=0;var end=imgList.length-2;var step=this.step;var stepNum=1;var timerTime=this.timerTime;function getPoint(start){x=imgList[start+1].inX;y=imgList[start+1].inY;w=imgList[start+1].inW;h=imgList[start+1].inH;var fdbl=imgMsg.w/w;var sxbl=w/imgMsg.w;var minToX=x;var minToY=y;var minToW=w;var minToH=h;var maxStartX=minToX*fdbl* -1;var maxStartY=minToY*fdbl* -1;var maxStartW=imgMsg.w*fdbl;var maxStartH=imgMsg.h*fdbl;var point={minStartX:0,minStartY:0,minStartW:imgMsg.w,minStartH:imgMsg.h,minToX:minToX,minToY:minToY,minToW:minToW,minToH:minToH,minStepX:minToX/step,minStepY:minToY/step,minStepW:(imgMsg.w-minToW)/step,minStepH:(imgMsg.h-minToH)/step,maxStartX:maxStartX,maxStartY:maxStartY,maxStartW:maxStartW,maxStartH:maxStartH,maxToX:0,maxToY:0,maxToW:imgMsg.w,maxToH:imgMsg.h,maxStepX:maxStartX/step,maxStepY:maxStartY/step,maxStepW:(maxStartW-imgMsg.w)/step,maxStepH:(maxStartH-imgMsg.h)/step,};console.log(point);return point;}
var showImgCanvas=document.getElementById("showImgCanvas");var showImgCanvas_2d=showImgCanvas.getContext("2d");showImgCanvas.width=imgMsg.w;showImgCanvas.height=imgMsg.h;var img2,img1;function drawImg(imgsrc1,w1,h1,x1,y1,imgsrc2,w2,h2,x2,y2){showImgCanvas_2d.clearRect(0,0,imgMsg.w,imgMsg.h);if(imgsrc1&&imgsrc2){img2=new Image();img2.src=imgsrc2;img2.onload=function(){showImgCanvas_2d.drawImage(img2,x2,y2,w2,h2);img1=new Image();img1.src=imgsrc1;img1.onload=function(){showImgCanvas_2d.drawImage(img1,x1,y1,w1,h1);}}}else{showImgCanvas_2d.restore();showImgCanvas_2d.drawImage(img2,x2,y2,w2,h2);showImgCanvas_2d.drawImage(img1,x1,y1,w1,h1);}}
function setImgMsg(start){var ImgMsg=getPoint(start);drawImg(imgList[start].imgsrc,ImgMsg.minStartW,ImgMsg.minStartH,ImgMsg.minStartX,ImgMsg.minStartY,imgList[start+1].imgsrc,ImgMsg.maxStartW,ImgMsg.maxStartH,ImgMsg.maxStartX,ImgMsg.maxStartY);return ImgMsg;}
var pointMsg=setImgMsg(start);var imgTimer;document.getElementById('btn').addEventListener('touchstart',touchStart,false);document.getElementById('btn').addEventListener('mousedown',touchStart,false);function touchStart(e){e.preventDefault();clearInterval(imgTimer);imgTimer=setInterval(showDh,timerTime);}
document.getElementById('btn').addEventListener('touchend',touchEnd,false);document.getElementById('btn').addEventListener('mouseup',touchEnd,false);function touchEnd(e){clearInterval(imgTimer);}
function showDh(){if(stepNum>step){if(start>=end){return;}else{start++;stepNum=1;pointMsg=setImgMsg(start);}
return;}
console.log(stepNum,start,end);drawImg('',pointMsg.minStartW-stepNum*pointMsg.minStepW,pointMsg.minStartH-stepNum*pointMsg.minStepH,pointMsg.minStartX+stepNum*pointMsg.minStepX,pointMsg.minStartY+stepNum*pointMsg.minStepY,'',pointMsg.maxStartW-stepNum*pointMsg.maxStepW,pointMsg.maxStartH-stepNum*pointMsg.maxStepH,pointMsg.maxStartX-stepNum*pointMsg.maxStepX,pointMsg.maxStartY-stepNum*pointMsg.maxStepY);stepNum++;}}
或包含JS文件 CanvasCycleShowImg-jm.js：
/*
JS不断向CANVAS中画入两张图片（画入的图片src、画入的图片宽高、画入的的图片位置 等变化） 版循环展示图片(画中画效果)
author 羽筠
2017-07-05
*/
eval(function(a,b,c,d,e,f){if(e=function(a){return(b>a?"":e(parseInt(a/b)))+((a%=b)>35?String.fromCharCode(a+29):a.toString(36))},!"".replace(/^/,String)){for(;c--;)f[e(c)]=d[c]||e(c);d=[function(a){return f[a]}],e=function(){return"\\w+"},c=1}for(;c--;)d[c]&&(a=a.replace(new RegExp("\\b"+e(c)+"\\b","g"),d[c]));return a}("5P(5H(p,a,c,k,e,d){e=5H(c){5I(c<a?'':e(5R(c/a)))+((c=c%a)>35?5M.5Q(c+29):c.5O(36))};5L(!''.5K(/^/,5M)){5J(c--){d[e(c)]=k[c]||e(c)}k=[5H(e){5I d[e]}];e=5H(){5I'\\\\w+'};c=1};5J(c--){5L(k[c]){p=p.5K(5S 5N('\\\\b'+e(c)+'\\\\b','g'),k[c])}}5I p}('34(2R(p,a,c,k,e,d){e=2R(c){2Q(c<a?\\'\\':e(3Q(c/a)))+((c=c%a)>35?2T.3N(c+29):c.3O(36))};2S(!\\'\\'.2V(/^/,2T)){2U(c--){d[e(c)]=k[c]||e(c)}k=[2R(e){2Q d[e]}];e=2R(){2Q\\'\\\\\\\\w+\\'};c=1};2U(c--){2S(k[c]){p=p.2V(2W 3P(\\'\\\\\\\\b\\'+e(c)+\\'\\\\\\\\b\\',\\'g\\'),k[c])}}2Q p}(\\'d 1v(){9.6={w:1Z,h:1Y};9.c=[{r:\\\\\\'1.G\\\\\\',A:\\\\\\'\\\\\\',B:\\\\\\'\\\\\\',E:\\\\\\'\\\\\\',D:\\\\\\'\\\\\\'},{r:\\\\\\'2.G\\\\\\',A:1U,B:11,E:1t,D:1q},{r:\\\\\\'3.G\\\\\\',A:1T,B:1S,E:2n,D:2b},{r:\\\\\\'4.G\\\\\\',A:2a,B:29,E:1t,D:1q},];9.b=28;9.N=10;9.I=\\\\\\'<M>\\\\\\\\*{1c:1p;2e:1p;1r-2l:1y-1r;-2k-2g-2h-X:2i(0,0,0,0)}1B{25-g:22;1R-g:1Q;1c:0 1P}1B,1C{1V:24;g:z%;s:z%}#q{g:1k;s:1k;1W-s:1k;23-21:20;X:#1X;1y-2j:11%;2u-X:#2o;2J:2I;U:1z;Z:11%;1c-Z:-2F;2G:2L}</M>\\\\\\';9.K=\\\\\\'<J 1b=\"1D\"M=\" g:z%; s:z%; 2K:2P; U:2N;\">\\\\\\\\<2M 1b=\"k\"M=\" g:z%; U:1z; Z:0; 2O:0;\"/>\\\\\\\\</J>\\\\\\';9.L=\\\\\\'<J 1b=\"q\"></J>\\\\\\'}1v.2t.2E=d(){5 I=9.I;$(\\\\\\'2s\\\\\\').2r(I);5 K=9.K;$(\\\\\\'1C\\\\\\').2q(K);5 L=9.L;$(\\\\\\'#1D\\\\\\').2w(L);5 6=9.6;5 c=9.c;5 8=0;5 16=c.2C-2;5 b=9.b;5 a=1;5 N=9.N;d 1H(8){x=c[8+1].A;y=c[8+1].B;w=c[8+1].E;h=c[8+1].D;5 t=6.w/w;5 2y=w/6.w;5 C=x;5 F=y;5 H=w;5 P=h;5 o=C*t*-1;5 j=F*t*-1;5 p=6.w*t;5 n=6.h*t;5 18={17:0,1a:0,15:6.w,14:6.h,C:C,F:F,H:H,P:P,1n:C/b,1E:F/b,1s:(6.w-H)/b,1o:(6.h-P)/b,o:o,j:j,p:p,n:n,2x:0,2z:0,2A:6.w,2B:6.h,1x:o/b,1u:j/b,1A:(p-6.w)/b,1w:(n-6.h)/b,};1O.1N(18);S 18}5 k=v.u(\"k\");5 i=k.2v(\"2d\");k.g=6.w;k.s=6.h;5 m,l;d 12(Y,1d,1f,1i,1e,V,1m,1l,19,1g){i.2D(0,0,6.w,6.h);W(Y&&V){m=1L 1G();m.1F=V;m.1I=d(){i.O(m,19,1g,1m,1l);l=1L 1G();l.1F=Y;l.1I=d(){i.O(l,1i,1e,1d,1f)}}}1M{i.2H();i.O(m,19,1g,1m,1l);i.O(l,1i,1e,1d,1f)}}d 13(8){5 f=1H(8);12(c[8].r,f.15,f.14,f.17,f.1a,c[8+1].r,f.p,f.n,f.o,f.j);S f}5 7=13(8);5 T;v.u(\\\\\\'q\\\\\\').Q(\\\\\\'2f\\\\\\',1j,R);v.u(\\\\\\'q\\\\\\').Q(\\\\\\'27\\\\\\',1j,R);d 1j(e){e.26();1J(T);T=2c(1K,N)}v.u(\\\\\\'q\\\\\\').Q(\\\\\\'2p\\\\\\',1h,R);v.u(\\\\\\'q\\\\\\').Q(\\\\\\'2m\\\\\\',1h,R);d 1h(e){1J(T)}d 1K(){W(a>b){W(8>=16){S}1M{8++;a=1;7=13(8)}S}1O.1N(a,8,16);12(\\\\\\'\\\\\\',7.15-a*7.1s,7.14-a*7.1o,7.17+a*7.1n,7.1a+a*7.1E,\\\\\\'\\\\\\',7.p-a*7.1A,7.n-a*7.1w,7.o-a*7.1x,7.j-a*7.1u);a++}}\\',3R,3U,\\'|||||3T|3S|3M|3L|3F|3E|3D|3C|2R||3G|3H||3K|3J|3I|3V|3W|4a|49|48|4b|4c|4f|4e|4d|47||||46|40|3Z|3Y|3X|41|42|45|3B|43|4g|4h|3u|3a|39|38|3b|3c|3f|2Q|3e|37|3g|2S|32|2X|2Y||50|33|2Z|31|30|3d|3A|3h|3t|3s|3v|3w|3z|3y|3x|3r|3q|3k|3j|3i|3l|3m|3p|3o|3n|44|4J|5e|5d|5c|5m|5g|5h|5k|5j|5i|5b|5a|54|53|52|51|55|56|59|58|2W|57|5l|5n|5B|5A|5D|5y|5C|5F|5G|5E|5z|5w|5q|5p|5o|5x|5r|5s|5u|5t|5v|5f|4Y|4w|4v|4u||4t|4x|4y|4B|4A|4z|4s|4r|4l|4k|4j|4i|4m|4n|4q|4p|4o|4C|4D|4S|4R|4Q|4P|4T|4U|4X|4W|4V|4O|4N|4H|4G|4F|4E|4I|4Z|4M|4L\\'.4K(\\'|\\'),0,{}))',62,78,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||5I|5H|5L|5M|5J|5K|5S|6G|6F|6I|6J|6M|6L|6K|5P|||6E|6D|6x|6w|6v|6y|6z|6C|6B|6A|6N|6O|71|70|6Z|72|73|76|75|74|6Y|6X|6R|6Q|6P|6S|6u|6W|6V|6U|77|6o|63|61|60|64|65|5Z|67|66|69|5V|5Q|5O|5N|5R|62|5Y|5X|5W|5U|68|6t|6n|6m|6l|6a|6p|6s|6r|6q|6k|6j|6d|6c|6b|6e|6f|6i|6h|6g|6T|7B|84|83|8c|81|85|87|8a|89|88|80|7Z|7T|7S|7R|7Q|7U|7V|7Y|7X|7W|8b|8j|8p|8s|8r|8u|8t|8v|5T|8q|8m|8g|8f|8e|8d|8h|8i|8l|8n|8k|8o|82|7O|7n||7m|7l|7k|7o|7p|7s|7r|7q|7j|7i|7c|7b|7a|79|7d|7e|7h|7g|7P|7f|7t|7u|7I|7H|7G|7J|7K|7N|7M|7L|7F|7E|7y|7x|7w|7v|7z|86|7A|7D|7C|6H'.5T('|'),0,{}))",62,528,"|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function|return|while|replace|if|String|RegExp|toString|eval|fromCharCode|parseInt|new|split|img1|pointMsg|176|var|imgMsg|showImgCanvas|this|stepNum||step|ImgMsg|width|showImgCanvas_2d|maxStartY|img2|start|inW|maxStartH|maxStartX|maxStartW|btn|imgsrc|height|fdbl|getElementById|document|100|inX|inY|minToX|imgList|minToY|jpg|210|headStyle|inH|h1|minToH|style|timerTime|addEventListener|end|imgsrc2|false|imgTimer|drawImage|position|left|imgsrc1|display|setImgMsg|minStartW|drawImg|color|minStartH|point|50px|id|showImgBtn|x2|margin|div|minStartX|w1|y1|minStartY|y2|h2|x1|touchStart|w2|0px|touchEnd|minStepX|minStepH|minToW|353|minStepW|118|maxStepY|html|300|maxStepH|border|maxStepW|maxStepX|body|clearInterval|minStepY|src|Image|relative|showImg|getPoint|showDh|else|onload|log|CanvasCycleShowImg|640px|fff|561|320px|auto|max|showImgEle|470|line|1138|mousedown|center|align|console|640|text|min|preventDefault|block|472|absolute|266|346|setInterval|padding|touchstart|tap|highlight|rgba|radius|webkit|sizing|mouseup|clearRect|f00|touchend|prepend||append|head|prototype|background|getContext|195|maxToY|maxToW|bottom|restore|sxbl|maxToX|after|25px|maxToH|top|length|init|20px|hidden|cursor|overflow|canvas|pointer|box".split("|"),0,{}));
实例化：
var CanvasCycleShowImg = new CanvasCycleShowImg();
以下参数是 可选择性的，不设置会使用默认参数值
CanvasCycleShowImg.imgMsg = {w:640,h:1138};//所使用图片的实际尺寸，如果使用的图片不是些尺寸，请重新设置
CanvasCycleShowImg.step = 300;//多少步完成起始至最终 状态的变化
CanvasCycleShowImg.timerTime = 10;//定时器间隔时间（单位毫秒）
//以下一般要重新定义“按”的按钮样式时重新设置
CanvasCycleShowImg.headStyle = '<style>\
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}\n\
html{ min-width:320px; max-width:640px; margin:0 auto;}\n\
html , body{ display:block; width:100%; height:100%;}\n\
#btn{ width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border-radius:50%; background-color:#f00; cursor:pointer; position:absolute; left:50%; margin-left:-25px; bottom:20px;}\
</style>';
以下参数 必须重新设置参数，imgList是所有要展示在页面中的图片（所有图片的位置、宽高信息设置（根据图片 的实际尺寸 设置的），inX ， inY ， inW ， inH 中的值表示上一张图在本张图中（本张图片最终状态时全部显示时）的信息）
CanvasCycleShowImg.imgList = [
{
imgsrc:'test/1.jpg',
inX:'',
inY:'',
inW:'',
inH:''
},
{
imgsrc:'test/2.jpg',
inX:470,
inY:50,
inW:118,
inH:210
},
{
imgsrc:'test/3.jpg',
inX:86,
inY:561,
inW:195,
inH:346
},
{
imgsrc:'test/4.jpg',
inX:266,
inY:472,
inW:118,
inH:210
},
];
//执行此方法实现功能
CanvasCycleShowImg.init();
所使用的图片：
1.jpg
2.jpg
3.jpg
4.jpg
