[程序 App] 多张图片即位放大程序的优化

前几天解决了同一页面上多张图片即位放大的问题,虽然很高兴,但程序仍然需要优化,现已经在国之瑰宝网站http://szgzgb.com/实现,优化后JS代码从200余行减少到90余行。
1、scaxy6.js(初版见http://codeigniter.org.cn/forums/thread-12807-1-1.html之2)的优化版本如下:
var border = 1; //边框
var srcX1 = 1024; //原图大小,可以任意设置
var srcY1 = 768;
var bigX1 = 300; //预览窗大小,可以任意设置
var bigY1 = 225;
var smallX1 = 300; //缩略图宽度
var smallY1 = srcY1 * smallX1 / srcX1;
var viewX1 = bigX1 / srcX1 * smallX1; //预览范围
var viewY1 = bigY1 / srcY1 * smallY1;
var bn1 = srcX1 / smallX1;//缩小比例
var srcX2 = 1024; //原图大小,可以任意设置
var srcY2 = 768;
var bigX2 = 300; //预览窗大小,可以任意设置
var bigY2 = 225;
var smallX2 = 300; //缩略图宽度
var smallY2 = srcY2 * smallX2 / srcX2;
var viewX2 = bigX2 / srcX2 * smallX2; //预览范围
var viewY2 = bigY2 / srcY2 * smallY2;
var bn2 = srcX2 / smallX2;//缩小比例
var srcX3 = 1024; //原图大小,可以任意设置
var srcY3 = 768;
var bigX3 = 300; //预览窗大小,可以任意设置
var bigY3 = 225;
var smallX3 = 300; //缩略图宽度
var smallY3 = srcY3 * smallX3 / srcX3;
var viewX3 = bigX3 / srcX3 * smallX3; //预览范围
var viewY3 = bigY3 / srcY3 * smallY3;
var bn3 = srcX3 / smallX3;//缩小比例
var srcX4 = 1024; //原图大小,可以任意设置
var srcY4 = 768;
var bigX4 = 300; //预览窗大小,可以任意设置
var bigY4 = 225;
var smallX4 = 300; //缩略图宽度
var smallY4 = srcY4 * smallX4 / srcX4;
var viewX4 = bigX4 / srcX4 * smallX4; //预览范围
var viewY4 = bigY4 / srcY4 * smallY4;
var bn4 = srcX4 / smallX4;//缩小比例
var srcX5 = 1024; //原图大小,可以任意设置
var srcY5 = 768;
var bigX5 = 300; //预览窗大小,可以任意设置
var bigY5 = 225;
var smallX5 = 300; //缩略图宽度
var smallY5 = srcY5 * smallX5 / srcX5;
var viewX5 = bigX5 / srcX5 * smallX5; //预览范围
var viewY5 = bigY5 / srcY5 * smallY5;
var bn5 = srcX5 / smallX5;//缩小比例
var srcX6 = 1024; //原图大小,可以任意设置
var srcY6 = 768;
var bigX6 = 300; //预览窗大小,可以任意设置
var bigY6 = 225;
var smallX6 = 300; //缩略图宽度
var smallY6 = srcY6 * smallX6 / srcX6;
var viewX6 = bigX6 / srcX6 * smallX6; //预览范围
var viewY6 = bigY6 / srcY6 * smallY6;
var bn6 = srcX6 / smallX6;//缩小比例
window.onload=function (){
//head.innerHTML="JS+CSS实现图片放大预览效果,鼠标可以滑动图片任意地方";
smallpic1.width=smallX1;
smallpic1.height=smallY1;
bigpic1.width=srcX1;
bigpic1.height=srcY1;
view1.style.width=viewX1;
view1.style.height=viewY1;
smallbox1.style.borderWidth=border;
bigbox1.style.borderWidth=border;
smallpic2.width=smallX2;
smallpic2.height=smallY2;
bigpic2.width=srcX2;
bigpic2.height=srcY2;
view2.style.width=viewX2;
view2.style.height=viewY2;
smallbox2.style.borderWidth=border;
bigbox2.style.borderWidth=border;
smallpic3.width=smallX3;
smallpic3.height=smallY3;
bigpic3.width=srcX3;
bigpic3.height=srcY3;
view3.style.width=viewX3;
view3.style.height=viewY3;
smallbox3.style.borderWidth=border;
bigbox3.style.borderWidth=border;
smallpic4.width=smallX4;
smallpic4.height=smallY4;
bigpic4.width=srcX4;
bigpic4.height=srcY4;
view4.style.width=viewX4;
view4.style.height=viewY4;
smallbox4.style.borderWidth=border;
bigbox4.style.borderWidth=border;
smallpic5.width=smallX5;
smallpic5.height=smallY5;
bigpic5.width=srcX5;
bigpic5.height=srcY5;
view5.style.width=viewX5;
view5.style.height=viewY5;
smallbox5.style.borderWidth=border;
bigbox5.style.borderWidth=border;
smallpic6.width=smallX6;
smallpic6.height=smallY6;
bigpic6.width=srcX6;
bigpic6.height=srcY6;
view6.style.width=viewX6;
view6.style.height=viewY6;
smallbox6.style.borderWidth=border;
bigbox6.style.borderWidth=border;
if (window.event){
smallbox1.style.width=smallpic1.offsetWidth+border*2;
smallbox1.style.height=smallpic1.offsetHeight+border*2;
bigbox1.style.width=bigX1+border*2;
bigbox1.style.height=bigY1+border*2;
smallbox2.style.width=smallpic2.offsetWidth+border*2;
smallbox2.style.height=smallpic2.offsetHeight+border*2;
bigbox2.style.width=bigX2+border*2;
bigbox2.style.height=bigY2+border*2;
smallbox3.style.width=smallpic3.offsetWidth+border*2;
smallbox3.style.height=smallpic3.offsetHeight+border*2;
bigbox3.style.width=bigX3+border*2;
bigbox3.style.height=bigY3+border*2;
smallbox4.style.width=smallpic4.offsetWidth+border*2;
smallbox4.style.height=smallpic4.offsetHeight+border*2;
bigbox4.style.width=bigX4+border*2;
bigbox4.style.height=bigY4+border*2;
smallbox5.style.width=smallpic5.offsetWidth+border*2;
smallbox5.style.height=smallpic5.offsetHeight+border*2;
bigbox5.style.width=bigX5+border*2;
bigbox5.style.height=bigY5+border*2;
smallbox6.style.width=smallpic6.offsetWidth+border*2;
smallbox6.style.height=smallpic6.offsetHeight+border*2;
bigbox6.style.width=bigX6+border*2;
bigbox6.style.height=bigY6+border*2;
}
}
function move(e){
var ele=e.srcElement.id;
var viewX=viewX1;
var viewY=viewY1;
var bigpico=bigpico1;
var view=view1;
var bn=bn1;
switch (ele) {
case "smallpic1":
viewX=viewX1;
viewY=viewY1;
bigpico=bigpico1;
view=view1;
bbn=bn1;
break;
case "smallpic2":
viewX=viewX2;
viewY=viewY2;
bigpico=bigpico2;
view=view2;
bn=bn2;
break;
case "smallpic3":
viewX=viewX3;
viewY=viewY3;
bigpico=bigpico3;
view=view3;
bn=bn3;
break;
case "smallpic4":
viewX=viewX4;
viewY=viewY4;
bigpico=bigpico4;
view=view4;
bn=bn4;
break;
case "smallpic5":
viewX=viewX5;
viewY=viewY5;
bigpico=bigpico5;
view=view5;
bn=bn5;
break;
case "smallpic6":
viewX=viewX6;
viewY=viewY6;
bigpico=bigpico6;
view=view6;
bn=bn6;
break;
}
var e = window.event?window.event:e;
var iebug = 0;
if (window.event){
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
}else{
var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
iebug = 2;
}
bigpico.style.marginLeft = - vX * bn
bigpico.style.marginTop = - vY * bn
view.style.left = e.x - viewX/2;
view.style.top = e.y - viewY/2;
}
2、处理尾页优化后(初版见http://codeigniter.org.cn/forums/thread-12807-1-1.html之5)的php代码如下:
<?php if($articles < 6): ?>
<?php
$A=1 + $articles;
$M=6;
for ($i=$A; $i<=$M; $i++)
{
?>
<div id="smallbox<?php echo $i; ?>"><img src="" id="smallpic<?php echo $i; ?>" /></div>
<div id="bigbox<?php echo $i; ?>" style="display:none">
<div id="bigpico<?php echo $i; ?>"><img src="" id="bigpic<?php echo $i; ?>" /></div>
</div>
<div id="view<?php echo $i; ?>" style="display:none"></div>
<?php }
?>
<?php endif; ?>