Ionize CMS框架多张图片即位放大的IE与Chrome浏览器兼容版本

jtzmsqzr

在Ionize CMS框架实现了多张图片即位放大，代码也优化了，但是问题并没有结束。经测试，代码在Chrome浏览器上无法正常运行，好在也只是一两天的功夫，现在已经解决。主要问题有二：一是我们的编码没有遵照W3C规范，用了HTML的保留字move作函数名，致使该函数无效；二是<!DOCTYPE> 标签使用不当。现问题已经解决，相关代码分享如下。
1、scaxy6.css文件不变，代码如下：
*{padding:0;margin:0}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
#smallbox1{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox1{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view1{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox2{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox2{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view2{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox3{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox3{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view3{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox4{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox4{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view4{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox5{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox5{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view5{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox6{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox6{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view6{border:1px #ddd solid;width:0px;height:0px;position:absolute}
2、scaxy6.js文件主要是move函数的修改，代码如下：
var srcX = 1024; //原图大小,可以任意设置
var srcY = 768;
var bigX = 300; //预览窗大小,可以任意设置
var bigY = 225;
var smallX = 300; //缩略图宽度
var smallY = srcY * smallX / srcX;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bn = srcX / smallX;//缩小比例
var border = 1; //边框
window.onload=function (){
for (i=1;i<=6;i++)
{
smallpic=document.getElementById('smallpic'+i);
bigpic=document.getElementById('bigpic'+i);
view=document.getElementById('view'+i);
smallbox=document.getElementById('smallbox'+i);
bigbox=document.getElementById('bigbox'+i);
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX;
bigpic.height=srcY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
bigbox.style.borderWidth=border;
}
if (window.event){
for (i=1;i<=6;i++)
{
smallbox=document.getElementById('smallbox'+i);
bigbox=document.getElementById('bigbox'+i);
smallbox.style.width=smallpic.offsetWidth+border*2;
smallbox.style.height=smallpic.offsetHeight+border*2;
bigbox.style.width=bigX+border*2;
bigbox.style.height=bigY+border*2;
}
}
//屏蔽无效图片
for (i=2;i<=6;i++)
{
smallpic=document.getElementById('smallpic'+i);
if (smallpic.src.toLocaleLowerCase().indexOf(".jpg") <0 ){
    document.getElementById('smallbox'+i).style.display="none";
}
}
}
function moveFun(e){
    var ele=e.srcElement.id;
    var bigpico=bigpico1;
    var view=view1;
    var smallbox=smallbox1;
    switch (ele) {
        case "smallpic1":
            bigpico=bigpico1;
            view=view1;
            smallbox=smallbox1;
            break;
        case "smallpic2":
            bigpico=bigpico2;
            view=view2;
            smallbox=smallbox2;
            break;
        case "smallpic3":
            bigpico=bigpico3;
            view=view3;
            smallbox=smallbox3;
            break;
        case "smallpic4":
            bigpico=bigpico4;
            view=view4;
            smallbox=smallbox4;
            break;
        case "smallpic5":
           bigpico=bigpico5;
           view=view5;
           smallbox=smallbox5;
           break;
        case "smallpic6":
            bigpico=bigpico6;
            view=view6;
            smallbox=smallbox6;
            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 = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
3、在放大图片的文件头header.php包含以上2个文件，并修改<!DOCTYPE> 标签：
<!DOCTYPE html PUBLIC >
......
<link rel="stylesheet" type="text/css" href="<ion:theme_url />enlarge/scaxy6.css" />
<script type="text/javascript" src="<ion:theme_url />enlarge/scaxy6.js"></script>
4、放大图片的php文件开始代码如下：
<ion:partial view="header1" />
    <div id="homepage-rotator" style="height:366px;width:615px;overflow:hidden;position:relative;left:180px;top:0px;">
<ion:medias type="picture">
  <a href='/themes/zjtz/enlarge/enlargejpg.php?arg=<ion:src folder="940" />'><img src='<ion:src folder="940" />' alt="" width="615" height="346" /></a>
</ion:medias>
    </div>
<!-- Home Content -->
<!-- Page's subtitle -->
<h2 class="title"><ion:subtitle /></h2>
<?php $articles = '0' ?>
<ion:articles  type="">
  <?php $articles = '<ion:index />'; ?>
  <div class="span-33 home ">
   <ion:medias type="picture" limit="1">
    <div class="imgborder" >
<div class="img" style="width:300 height:225px;">
<div id="smallbox<?php echo $articles; ?>">
<img src="<ion:src folder="940" />" id="smallpic<?php echo $articles; ?>" />
</div>
<div id="bigbox<?php echo $articles; ?>"  style="display:none">
<div id="bigpico<?php echo $articles; ?>"><img src="<ion:src folder="940" />" id="bigpic<?php echo $articles; ?>"></div>
</div>
<div id="view<?php echo $articles; ?>" style="display:none"></div>
</div>
    </div>
   </ion:medias>
   <h2><ion:title /></h2>
   <!-- Article's content -->
   <ion:content />
  </div>
</ion:articles>
请注意，以前的版本既支持图片的即位放大又支持移位单独放大，但这在Chrome浏览器导致图片抖动、闪烁，无法正常放大，故这里不再支持移位放大。
5、为了保证当最后一页不足6张图片时，放大程序能够正常运行，页面的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; ?>

卍龍卐︶︿︶

{:soso__7754094866387588564_3:}