js 做的图片察看器

最新推荐文章于 2024-01-08 11:16:39 发布

cchaha

最新推荐文章于 2024-01-08 11:16:39 发布

阅读量602

点赞数

文章标签： null div 测试 function url image

花了1个星期，做了一个图片察看器，支持缩略图和分页察看，感觉效果不错，但是没有加上幻灯片功能，现在把它都贴出来，有兴趣的可以自个修改！
------------------------------------------------------------------------------------------------------------------------------------------------
效果请参考：http://www.updou.com/douzi/viewbean?beanid=10000737
使用的时候把它保存为photo_view.js文件，然后再HTML中嵌入即可
<script language="javascript" src="photo_view.js" type="text/javascript"></script>
-------------------------------------------------------------------------------------------------------------------------------------------------
/*
*
*/
/*
* 为了避免在做嵌入时出现动态生成的Node的ID相同，给预定义的名称加上一个随机数的后缀
*/
var suffix = Math.ceil( Math.random() * 1000000000000);
var loadingIndex = Math.ceil( Math.random() * 10000);
/*
* 显示图片的容器的配置信息
*/
var Config = {
    cW        : 320,        //(自动计算)-容器中用来显示图片的宽度
    cH        : 320,        //(自动计算)-容器中用来显示图片的高度
    lH        : 0,          //缩略图容器占用的高度
    cPadding : 10,          //(预先设置)-容器的填充值
    itemW     : 60,         //(预先设置)-缩略图的宽度
    itemH     : 50,         //(预先设置)-缩略图的高度
    itemPad   : 2,          //(预先设置)-图片在水平方向占有的空间最小值，后面会自动计算修改
    lineNum   : 1,          //(预先设置)-用几行来显示缩略图
    lineSpace : 10,         //(预先设置)-行之间的间隔
    showCount : 5,          //(预先设置)-每行显示的缩略图个数，需要根据容器宽度和空白边计算出来。
    pageCount : 4,          //(自动计算)-总页数
    itemCount : 0,          //(自动计算)-总共有多少张图片需要显示
    itemIndex : 0,          //(自动计算)-当前显示的图片
    pageIndex : 0,          //(自动计算)-当前页索引（需要默认值0）
    oContainer : "oContainer" + suffix,         //(预先设置)-外部容器的ID
    pContainer : "pContainer" + suffix,         //(预先设置)-显示大图片的容器的ID
    iContainer : "iContainer" + suffix,         //(预先设置)-显示大图片img标签的ID
    lContainer : "lContainer" + suffix,         //(预先设置)-显示列表的容器的ID
    tContainer : "tContainer" + suffix,         //(预先设置)-显示图片标题的容器的ID
    xContainer : "xContainer" + suffix,         //(预先设置)-显示图片页数的容器的ID
    titleH     : 30,                   //显示图片标题的DIV高度
    pageLineH : 20,                   //显示页码的DIV的高度
    preImage   : "images/toPrePageNormal.png",       //(预先设置)-显示为上一页的图片
    nextImage : "images/toNextPageNormal.png",      //(预先设置)-显示为下一页的图片
    preImageB : "images/toPrePageOver.png",       //(预先设置)-显示为上一页的图片
    nextImageB : "images/toNextPageOver.png",      //(预先设置)-显示为下一页的图片
    preContainer : "toPrePageImage" + suffix,   //(预先设置)-
    nextContainer: "toNextPageImage" + suffix, //(预先设置)-
    btnW       : 25,                            //(预先设置)-按钮的宽度，高度使用itemH
    linkH      : 35,                            //显示连接栏的高度
    linkContainer : "linkContainer" + suffix,
    adH         : 25,                           //广告栏显示的高度
    adContainer : "adContainer" + suffix,
    /************************************************/
    picAddress : "http://www.youdomain.com/showimage?id=", //为了不给客户端真实的图片URL，这里修改为支持动态图片数据
    loadingFlag : true,                          //显示加载过程为Loading图片
    loadImageContainer:"loadImageContainer",
    loadImage   : "images/loading.gif",          //(预先设置)-加载前显示的加载动画
    loadingH    : 16,                            //加载动画的高度
    loadingW    : 16                             //加载动画的宽度
}
/*
* 各个DIV的颜色配置信息
*/
var PicColor ={
    ocBgColor          :"#F4F4F4", //最外层DIV的背景颜色
    icBgColor          :"",         //显示图片的DIV的背景颜色
    lcBgColor          :"#F4F4F4", //包含缩略图列表的DIV的颜色
    socBgColor         :"#FCFC00", //包含缩略图的DIV的颜色
    scBgColorOver      :"#F4F4F4", //鼠标移到缩略图上包含缩略图的DIV的背景颜色
    scBgColorOut       :"#F4F4F4", //缩略图所在容器的背景颜色
    scBorderColorOver :"#66FF99", //鼠标移到缩略图上图片的上下边框的颜色
    bcBgCorlor         :"#F4F4F4", //按钮容器的背景
    selectedcBgCorlor :"#FF8C00", //选中缩略图的背景颜色
    imageBorderCorlor :"#669900"   //正常缩略图的边框颜色
}
/********************************************************************************/
//定义功能跳转地址
var LinkAddress = new Array();
LinkAddress[0] ={title:"掰它",url:"4.htm"}
LinkAddress[1] ={title:"查看评论",url:"5.htm"}
LinkAddress[2] ={title:"推荐给好友",url:"6.htm"}

//定义文字广告列表
var TxtAdList = new Array();
TxtAdList[0] = { title:"好吃你就多吃点",url:"1.htm" }
TxtAdList[1] = { title:"联想天骄P4暑假大促销",url:"2.htm" }
TxtAdList[2] = { title:"是男人就应该狠点",url:"3.htm" }
TxtAdList[3] = { title:"惠普PC热卖",url:"" }

//缩略图和真实图片的地址

//定义图片的地址数组
var PicArr = new Array();
PicArr[0] = {id:15303,title:"测试图片_1"}
PicArr[1] = {id:15304,title:"测试图片_2"}
PicArr[2] = {id:15305,title:"测试图片_3"}
PicArr[3] = {id:15306,title:"测试图片_4"}
PicArr[4] = {id:15307,title:"测试图片_5"}
PicArr[5] = {id:15206,title:"测试图片_6"}
PicArr[6] = {id:15207,title:"测试图片_7"}
PicArr[7] = {id:15308,title:"测试图片_8"}
PicArr[8] = {id:15309,title:"测试图片_9"}
PicArr[9] = {id:15310,title:"测试图片_10"}
PicArr[10] = {id:15311,title:"测试图片_11"}
PicArr[11] = {id:15312,title:"测试图片_12"}

/*****************************************************************************/

/**********************以下的代码都不需要修改*********************************/
/*
* 预加载图片数组，其中每个元素都是Image对象
*/
var cacheImageObj = new Array();

/*
* 全部变量
*/
var selectedImage;
var bigImageObject;
//alert( selectedImage);
/*
* 在指定的容器中显示数组的内容
* @container 容器的ID
* @arr       内容数组
* align      对齐方式
*/
function showMessage( container,arr,align){
    if( arr.length > 0 ){
        var c = document.getElementById(container);
        c.style.fontSize = "12px";
        c.style.textAlign = align;
        var s ="";
        var i = 0;
        for( ;i<arr.length-1;i++ ){
            s = s + "<a href=/"" + arr[i].url + "/" target=/"_blank/">"+ arr[i].title + "</a> | " ;
        }
        s = s + "<a href=/"" + arr[i].url + "/">"+ arr[i].title + "</a>";
        c.innerHTML = s;
    }
}
function showTitle( container,title,align){
    var c = document.getElementById(container);
    c.style.fontSize = "14px";
    c.style.textAlign = align;
    c.innerHTML = title + " ";
}
function showPageCode( container,align){
    var c = document.getElementById(container);
    c.style.fontSize = "12px";
    c.style.textAlign = align;
    var startPos = (Config.pageIndex -1) * Config.showCount + 1;
    var endPos   = startPos + Config.showCount -1;
    var s ="["+ Config.pageIndex + "] / " + "["+ Config.pageCount + "]　" + startPos + " - " + endPos + " / " + Config.itemCount;
    c.innerHTML = s;
}
/*
* 根据缩略图获取原图的地址
*/
function getSourcePicture( url )
{
    var i = url.indexOf("&");
    if( i > 0 ){
        return url.substr(0,i);
    }else{
        return url;
    }
}
function showLoading( sourceImage){
    sourceImage.src = Config.loadImage;
    sourceImage.style.display ="block";
    var parentNode = sourceImage.parentNode;
    var iLeft = iTop = cH = cW = 0;
    cH = parentNode.style.height;
    cH = parseInt(cH.substr(0,cH.length-2 ));
    cW = parentNode.style.width;
    cW = parseInt(cW.substr(0,cW.length-2 ));
    if( cH >= Config.loadingH){
        iTop = ( cH - Config.loadingH)/2;
        sourceImage.style.height = Config.loadingH + "px";
    }else{
        sourceImage.style.height = cH + "px";;
    }
    if( cW >= Config.loadingW ){
      iLeft = ( cW - Config.loadingW)/2 ;
      sourceImage.style.width = Config.loadingW + "px";
    }else{
        sourceImage.style.width = cW + "px";
    }
    sourceImage.style.position="absolute";
    sourceImage.style.top = iTop + "px";
    sourceImage.style.left = iLeft + "px";
}
/*
* 预加载一个图片对象，并返回该对象
* @imgUrl 图片的地址
*/
function CacheImage(imgUrl){
    var imgObj = new Image();
    imgObj.src = imgUrl;
    return imgObj;
}

/*
* 检测指定的预加载图片是否已经加载完成（100毫秒检测一次）
* 用图片的src属下做为缓存图片的关联数组的下标
* @sourceImage 显示图片的Img标签的ID
* @id 图片的地址
*/
function loadImage( sourceImage,id ){
    if( cacheImageObj[id].complete != true ){
          setTimeout("loadImage('" + sourceImage + "','"+ id + "')",100);
    }else{
          var sImage = document.getElementById( sourceImage );
          //设置图片的填充padding为2
          sImage.style.padding ="2px";
          var c = sImage.parentNode;
          var cH   = c.style.height == ""? "200px" : c.style.height;        //获取容器的高度
          var cW   = c.style.width == ""? "200px" : c.style.width;         //获取容器的宽度
          //去掉单位（px）再减去缩略图占用的高度 -4 是去掉图片的padding
          cH = parseInt(cH.substr(0,cH.length-2 )) -4;
          cW = parseInt(cW.substr(0,cW.length-2 )) -4;
          //容器的高度和宽度之比
          cRadio = cH / cW;
          /* 缓存图片的高度和宽度*/
          var oH = cacheImageObj[id].height;
          var oW = cacheImageObj[id].width;
          /* 图片的高度和宽度之比*/
          var oRadio = oH / oW;
          //把已经缓存进来的图片src设置为显示标签的src
          sImage.src   = cacheImageObj[id].src;
          //按比例设置图片的高度和宽度
          if( cRadio >= oRadio ){
              if( oW > cW ){
                  sImage.width = cacheImageObj[id].width = cW;
                  sImage.height = cacheImageObj[id].height = cW * oRadio;
              }else{
                  sImage.width = cacheImageObj[id].width;
                  sImage.height = cacheImageObj[id].height;
              }
          }else{
              if( oH > cH ){
                  sImage.height = cacheImageObj[id].height = cH;
                  sImage.width = cacheImageObj[id].width = cH / oRadio;
              }else{
                  sImage.width = cacheImageObj[id].width;
                  sImage.height = cacheImageObj[id].height;
              }
          }
          var leftPos = (cW - cacheImageObj[id].width) /2;
          var topPos = (cH - cacheImageObj[id].height) /2;
          //relative absolute
          sImage.style.position="absolute";
          sImage.style.left = leftPos + "px";
          sImage.style.top = topPos + "px";
          if( sImage.previousSibling != null){
               sImage.previousSibling.style.display = "none";
               sImage.style.display = "block";
          }
          //设置小图片的边框
          if( bigImageObject != sImage ){
              //上一页和下一页图片不加边框
              if( sImage.id == Config.preContainer || sImage.id == Config.nextContainer){
              }else if( sImage != selectedImage ){
                  sImage.style.border = "1px solid " + PicColor.imageBorderCorlor;
              }else{
                  sImage.style.border = "1px solid " + PicColor.socBgColor;
              }
              sImage.style.padding ="1px";
          }
    }
}
/*
* 把DIV容器(container)中的图片（sourceImage）的地址修改为src
* @sourceImage 显示图片的Img标签的ID
* @id 图片的地址
*/
function changeImage( sourceImage,id){
    var ls = sourceImage;
    cacheImageObj[id] = CacheImage( id );
    if( ls.previousSibling != null ){
        ls.style.display ="none";
        showLoading( ls.previousSibling );
    }
    //删掉重建
    if( ls == bigImageObject ){
        var divNode = ls.parentNode;
        divNode.removeChild( ls );
        var imgNode=createImgNode( divNode,Config.iContainer,null,"none",null,null,null);
        imgNode.style.border = "1px solid " + PicColor.imageBorderCorlor;
        ls = bigImageObject = imgNode;
    }
    loadImage(ls["id"],id);
}
/*
* 动态生成一个DIV节点
*/
function createDivNode( parentNode,nodeId,position,iLeft,iTop,iHeight,iWidth,bgColor){
    var divNode = document.createElement("div");
    divNode.setAttribute("id", nodeId );
    divNode.style.position = position;
    divNode.style.left     = iLeft + "px";
    divNode.style.top      = iTop + "px";
    divNode.style.height   = iHeight + "px";
    divNode.style.width    = iWidth + "px";
    divNode.style.backgroundColor = bgColor;
    parentNode.appendChild( divNode );
    return divNode;
}
/*
* 动态生成一个Img节点
*/
function createImgNode( parentNode,nodeId,title,display,clk,over,out){
    var imgNode = document.createElement("img");
    imgNode.style.display = display;
    imgNode.setAttribute("id", nodeId );
    imgNode.setAttribute("title",title);
    imgNode.onclick = clk;
    imgNode.onmouseover = over;
    imgNode.onmouseout = out;
    parentNode.appendChild( imgNode );
    return imgNode;
}
/*
* 初始化显示图片的各个界面元素的位置
*/
function initPhotoView(){
     var c = document.getElementById( Config.oContainer );
     //设置外部容器的高度和宽度
     Config.lH = (Config.itemH + Config.lineSpace ) * Config.lineNum + Config.lineSpace;
     var ocH = Config.cH + Config.titleH + Config.pageLineH + Config.linkH + Config.adH + Config.lH +
     Config.cPadding * 2 ;
     var ocW = Config.cW + Config.cPadding * 2;
     c.style.height = ocH + "px";
     c.style.width = ocW + "px";
     //设置外部容器的背景颜色
     c.style.backgroundColor = PicColor.ocBgColor;

     /*
     * 计算每个缩略图的空白边和每行可以放置的个数,如果只有一行，则两个图片按钮都出现在这一行，
     * 如果有多行，则上一页按钮出现在第一行的第一位置，下一页按钮出现在最后一行的最后位置
     */
     var btnW =   Config.btnW * 2;
     Config.showCount = Math.floor( (Config.cW - btnW ) / ( Config.itemW + Config.itemPad) );
     Config.itemPad   = ( Config.cW - Config.itemW * Config.showCount - btnW -2 ) / Config.showCount;
     Config.itemCount = PicArr.length;
     Config.pageCount = Math.ceil(PicArr.length / Config.showCount );

     //设置图片容器的位置
     var iLeft   = Config.cPadding;
     var iTop    = Config.cPadding;
     var iWidth = Config.cW -2;
     var iHeight = Config.cH;
     var divNode=createDivNode( c,Config.pContainer,"absolute",iLeft,iTop,iHeight,iWidth,PicColor.icBgColor);

     createImgNode( divNode,Config.loadImageContainer + loadingIndex++,"loading...","none",null,null,null);
     var imgNode=createImgNode( divNode,Config.iContainer,null,"block",null,null,null);
     imgNode.style.border = "1px solid " + PicColor.imageBorderCorlor;
     bigImageObject = imgNode;

     //设置标题显示栏的位置 padding: 5px;
     iTop    = Config.cPadding + Config.cH + 5;
     iHeight = Config.titleH - 5;
     createDivNode( c,Config.tContainer,"absolute",iLeft,iTop ,iHeight,iWidth,"");

     //设置页码显示栏的位置
     iTop    = iTop + Config.titleH - 5;
     iHeight = Config.pageLineH;
     createDivNode( c,Config.xContainer,"absolute",iLeft,iTop,iHeight,iWidth,"");

     //设置缩略图列表的位置
     iTop    = iTop + Config.pageLineH;
     iHeight = Config.lH -2; //2是边框的
     var lNode = createDivNode( c,Config.lContainer,"absolute",iLeft,iTop,iHeight,iWidth,PicColor.lcBgColor);
     lNode.style.border="1px solid #999999";

     //创建连接栏 Config.linkH
     iTop = iTop + Config.lH + 12;
     iHeight = Config.linkH -10;
     createDivNode( c,Config.linkContainer,"absolute",iLeft,iTop,iHeight,Config.cW - 2,"");
     showMessage( Config.linkContainer,LinkAddress,"center");

     //显示广告栏
     iTop    = iTop + Config.linkH -10;
     iHeight = Config.adH;
     createDivNode( c,Config.adContainer,"absolute",iLeft,iTop,iHeight,iWidth,"");
     showMessage( Config.adContainer,TxtAdList,"center");
     if( Config.itemCount ==0 ){
         showTitle( Config.xContainer,"<span style=/"color:#FF0000;/">提示:豆子还没有添加图片或者图片已经被删除</span>","center");
         return;
     }
     createPage("N");
     showPageCode(Config.xContainer,"center");
}
/*
* 生成一页的缩略图
* @page "P"-上一页 or "N"-下一页
*/
function createPage( page ){
     if( page =="P"){                     /* 显示上一页 */
         if( Config.pageIndex <= 1 ){
             return;
         }else{
            Config.pageIndex = Config.pageIndex - Config.lineNum;
         }

     }else if( page =="N"){               /* 显示下一页 */
         if( (Config.pageIndex+Config.lineNum-1) >= Config.pageCount ){
             return;
         }else{
            Config.pageIndex = Config.pageIndex == 0?1:Config.pageIndex+ Config.lineNum;
         }
     }
     //获取列表容器对象，并删除全部的子节点
     var l = document.getElementById( Config.lContainer );
     while( l.hasChildNodes() ){
         l.removeChild( l.firstChild);
     }
     //动态生成图片列表<div id="smallPictureContainer-1"><img id="smallPicture-1" src=../></div>
     //生成上一页的按钮容器和图片
     var preBtn =
     createDivNode(l,"c"+Config.preContainer,"absolute",0,Config.lineSpace,Config.itemH,Config.btnW,PicColor.bcBgCorlor);
     if( Config.pageIndex > 1 ){      /* 上一页不可见 */
         var imgNode = createImgNode(preBtn,Config.preContainer,"显示上一页","block",changePage,onPreImageOver,onPreImageOut);
         changeImage( imgNode,Config.preImage);
     }
     Config.itemIndex = ( Config.pageIndex -1) * Config.showCount;
     var pictureIndex = 0;
     for( var i=0;i< Config.lineNum; i++ ){
         for( var k = 1; k <= Config.showCount; k++ ){
             pictureIndex = Config.showCount * i + ( Config.pageIndex -1) * Config.showCount + k;
             if( pictureIndex <= Config.itemCount){
                 //增加一个div节点
                 var divNode = document.createElement("div");
                 divNode.setAttribute("id", "container_small_picture_" + pictureIndex );
                 divNode.style.position="absolute"; //relative absolute
                 divNode.style.left   = (Config.itemW + Config.itemPad) * (k-1) + Config.btnW + Config.itemPad / 2
                 + "px";
                 divNode.style.top    = (Config.itemH + Config.lineSpace )* i + Config.lineSpace + "px";
                 divNode.style.height = Config.itemH - 4 + "px";
                 divNode.style.width = Config.itemW - 4 + "px";
                 divNode.style.backgroundColor = PicColor.lcBgColor;
                 divNode.style.border ="2px solid " + PicColor.lcBgColor;

                 //在DIV中增加一个显示Loading动画的Img节点
                 createImgNode( divNode,Config.loadImageContainer +
                 loadingIndex++,"loading...","none",null,null,null);
                 //在div节点中增加一个img节点
                 var imgNode = document.createElement("img");
                 imgNode.setAttribute("id", "small_picture_" + pictureIndex );
                 imgNode.setAttribute("title", PicArr[pictureIndex-1].title );
                 imgNode.onclick = imageOnClick;
                 imgNode.onmouseover = imageOnMouseOver;
                 imgNode.onmouseout = imageOnMouseOut;

                 //把这个容器节点的引用保存到数组PicArr相对应的对象中
                 PicArr[pictureIndex-1].container = imgNode;
                 divNode.appendChild( imgNode );
                 l.appendChild( divNode );
                 changeImage(imgNode,Config.picAddress + PicArr[pictureIndex-1].id + "&w=" + Config.itemW );
             }
         }
     }
     var iLeft = ( Config.itemPad + Config.itemW ) * Config.showCount + Config.btnW;
     var iTop = ( Config.lineSpace + Config.itemH ) * ( Config.lineNum -1 ) + Config.lineSpace;
     var nextBtn = createDivNode(l,"c"+
     Config.nextContainer,"absolute",iLeft,iTop,Config.itemH,Config.btnW,PicColor.bcBgCorlor);
     if( (Config.pageIndex+Config.lineNum-1) < Config.pageCount ){ /* 下一页不可见 */
         var imgNextNode = createImgNode(nextBtn,Config.nextContainer,"显示下一页","block",changePage,onNextImageOver,onNextImageOut );
         changeImage( imgNextNode,Config.nextImage);
     }
     //显示第一张图片
     changeImage( bigImageObject,Config.picAddress + PicArr[Config.itemIndex].id );
     //设置第一个为选中状态
     selectedImage = PicArr[Config.itemIndex].container;
     selectedImage.style.border = "1px solid " + PicColor.socBgColor;
     selectedImage.parentNode.style.border = "2px solid " + PicColor.selectedcBgCorlor;
     //显示第一张图片的标题
     showTitle( Config.tContainer,PicArr[Config.itemIndex].title,"center");
}
/*
* 处理上一页和下一页的点击翻页动作
*/
function changePage(){
    if( this["id"] == Config.preContainer ){
        createPage("P");
    }else{
        createPage("N");
    }
    showPageCode(Config.xContainer,"center");
}

/*
* 单击图片的缩略图时把其对应的大图片加载到指定的位置显示
*/
function imageOnClick(){
    if( this == selectedImage ){
        return;
    }else if( selectedImage != undefined ){
        selectedImage.parentNode.style.border = "2px solid " + PicColor.lcBgColor;
        selectedImage.style.border = "1px solid "+ PicColor.imageBorderCorlor;
    }
    this.parentNode.style.border = "2px solid " + PicColor.selectedcBgCorlor;
    selectedImage = this;
    selectedImage.style.border = "1px solid "+ PicColor.socBgColor;
    changeImage( bigImageObject,getSourcePicture(this["src"]));
    showTitle( Config.tContainer,this.title,"center");
}
/*
* 鼠标移到缩略图上面时增加的显示效果
*/
function imageOnMouseOver(){
    this.parentNode.style.backgroundColor = PicColor.scBorderColorOver;
}
/*
* 鼠标移出缩略图时恢复原来的样式
*/
function imageOnMouseOut(){
    this.parentNode.style.backgroundColor = PicColor.scBgColorOut;
}
/*
* 翻页图片效果
*/
function onPreImageOver(){
    this["src"] = Config.preImageB;
}
function onPreImageOut(){
    this["src"] = Config.preImage;
}
function onNextImageOver(){
    this["src"] = Config.nextImageB;
}
function onNextImageOut(){
    this["src"] = Config.nextImage;
}
document.write("<div id=/"" + Config.oContainer + "/" style=/"position:relative;left:0px;top:0px;height:450px;width:400px;/"></div>");
initPhotoView();