CSS+DIV+Javascript前端开发实例之《图片展示》（1） - 原创教程- 日志信息 - 飘雨之夜

　　所在位置：杂记 >> 原创教程 >> CSS+DIV+Javascript前端开发实例之《图片展示》（1）

CSS+DIV+Javascript前端开发实例之《图片展示》（1）

发表于十四年前(2009-11-16 17:53:24) | 阅读 (1997) | 评论 (0)

今天起发一个CSS+DIV+Javascript实现的图片展示功能，今天先发一下DIV+CSS搭建的界面效果（CSS中带有详细注释，可供观摩）。

其中用到了之前开发的一个生成阴影边框文字的方法。当前界面内容兼容火狐、IE6、IE7。

演示地址：http://www.pyzy.net/Demo/js_css_div_img_box/index.htm

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>飘雨之夜 手把手教您DIV+CSS 及javascript之一 图片展示器的制作</title>
<script type="text/javascript">
/*-----实现阴影艺术字效果------- by 胡尊杰
-------fctText  文字内容
-------fctTop   文字在页面中距顶位置
-------fctLeft  文字在页面中距左位置
-------fctBold  阴影宽度
-------Color    文字颜色
-------bgColor  阴影颜色
-------FontSize 文字大小*/
if(typeof(pyzy)=='undefined')var pyzy={}; 
pyzy.ColorText=function(fctText,fctTop,fctLeft,fctBold,Color,bgColor,FontSize){
    var varZBT=(fctTop-fctBold/2);
    var varZBL=(fctLeft-fctBold/2);
    var varWriteText="";
    for(var i=1;i<fctBold;i++){
        for(var j=1;j<fctBold;j++){
            varWriteText=varWriteText+'<div style="position:absolute;z-index:98;margin:'+(varZBT+i)+'px '+(varZBL+j)+'px;color:'+bgColor+';font-size:'+FontSize+'px;">'+fctText+'</div>';
        }
    }
    return varWriteText+'<div style="position:absolute;z-index:98;margin:'+fctTop+'px '+fctLeft+'px;color:'+Color+';font-size:'+FontSize+'px;">'+fctText+'</div>';
}
//CloseImgBox
</script>
<style type="text/css">
/*图片盒子 总容器样式*/
.PyzyImgBox{width:690px;height:480px; border:solid #FFFFFF 3px; background-color:#000000;text-align:left;}
    /*设置所有子元素边距为0防止继承后导致界面错乱*/
    /*.PyzyImgBox div{padding:0px;margin:0px;}*/
    /*图片盒子 标题容器*/
    .PyzyImgBoxTitle{background:url(images/hotel_img_show_box_byhuzj.gif) 0px -44px; height:27px; line-height:height:27px;border:solid #2e3b44 1px;border-width:1px 0px; border-top-color:#484848;}
        /*图片盒子标题右侧的关闭*/
        .PyzyImgBoxTitle span{float:right;background:url(images/hotel_img_show_box_byhuzj.gif) 0px 0px;height:27px;width:27px; cursor:pointer;}
        /*图片盒子标题左侧的标题图片*/
        .PyzyImgBoxTitle img{background:url(images/hotel_img_show_box_title_byhuzj.gif) no-repeat;width:143px;height:27px;}
    /*大图片显示功能容器*/
    .PyzyImgBoxBody{height:388px;text-align:center;}
        /*“前一个”按钮*/
        .PyzyImgBoxForwardButton{float:left;width:60px;height:388px;}
            .PyzyImgBoxForwardButton img{background:url(images/hotel_img_show_box_byhuzj.gif) 0px -88px; margin-top:175px;cursor:pointer;width:29px;height:33px;}
        /*“后一个”按钮*/
        .PyzyImgBoxNextButton{float:right;width:60px;height:388px;}
            .PyzyImgBoxNextButton img{background:url(images/hotel_img_show_box_byhuzj.gif) 0px -141px;margin-top:175px;cursor:pointer;width:29px;height:33px;}
        /*主角出场：大图片显示容器*/
        #divPyzyImgBoxContent{position:relative;margin:0px 60px;height:388px;background:url(images/b.gif) center center no-repeat;}
    /*底部功能区*/
    .PyzyImgBoxBottom{ margin-top:4px;height:59px;background:url(images/hotel_img_show_box_byhuzj.gif) 0px -294px;}
        /*图片播放进度*/
        .PyzyImgBoxRate{width:50%; margin-top:1px;background-color:#bbbbbb;height:3px;border-top:solid #c5c5c5 1px;border-bottom:solid #dadada 1px;}
        /*小图片显示容器*/
        .PyzyImgBoxMinImg{height:53px;text-align:center;}
        /*小图片容器中的向左滚动按钮*/
        .PyzyImgBoxLeftScroll{float:left;height:53px;width:22px;}
            .PyzyImgBoxLeftScroll img{margin-top:10px;background:url(images/hotel_img_show_box_byhuzj.gif) 0px -198px;cursor:pointer;width:9px;height:32px;}
        /*小图片容器中的向右滚动按钮*/
        .PyzyImgBoxRightScroll{float:right;height:53px;width:22px;}
            .PyzyImgBoxRightScroll img{margin-top:10px;background:url(images/hotel_img_show_box_byhuzj.gif) 0px -249px;cursor:pointer;width:9px;height:32px;}
        /*小图片容器*/
        .PyzyMinImgBox{margin:0px 23px;height:53px;}
            /*用于设置overflow若在上一层设置将无法正常排版*/
            .PyzyMinImgBox div{width:638px;overflow:hidden;white-space:nowrap; font-size:0px;}
            /*小图片显示样式 透明样式兼容IE FF*/
            .PyzyMinImgBox img{filter:alpha(opacity=60);opacity: 0.6;cursor:pointer;margin:1px 4px;height:44px;width:52px; padding:1px 3px; border:solid #d9d9d9 1px;}
            /*若为当前图片则取消透明*/
            .PyzyMinImgBox img.Sel{filter:none;opacity:0;}
        
</style>
</head>
<body style="text-align:center; padding:20px; background-color:#333333">

<div class="PyzyImgBox">
    <div class="PyzyImgBoxTitle">
        <span title="关闭"></span>
        <img src="images/b.gif" onclick="CloseImgBox();" />
    </div>
    <div class="PyzyImgBoxBody">
        <div class="PyzyImgBoxForwardButton">
            <img src="images/b.gif" />
        </div>
        <div class="PyzyImgBoxNextButton">
            <img src="images/b.gif" />
        </div>
        <div id="divPyzyImgBoxContent" style="background-image:url(http://hiphotos.baidu.com/%BF%A8%BF%A8%B4%AB%CB%B5/pic/item/8ace9f53edf162a28c5430f7.jpg);">
            <script>
            document.write(
                pyzy.ColorText("○□※测试图片名称 - adsa.net",0,0,4,"#444;bottom:2px;right:10px","#444;bottom:2px;right:10px",12)+
                pyzy.ColorText("○□※测试图片名称 - adsa.net",2,2,4,"#990000;bottom:2px;right:10px","#fff;bottom:2px;right:10px",12)
            );
            </script>
        </div>
    </div>
    <div class="PyzyImgBoxBottom">
        <div class="PyzyImgBoxRate"><!--进度--></div>
        <div class="PyzyImgBoxMinImg">
            <div class="PyzyImgBoxLeftScroll">
                <img src="images/b.gif" />
            </div>
            <div class="PyzyImgBoxRightScroll">
                <img src="images/b.gif" />
            </div>
            <div class="PyzyMinImgBox">
                <div>
                    <img src="images/70.jpg" />
                    <img src="images/70.jpg" />
                    <img src="images/70.jpg" />
                    <img src="images/70.jpg" />
                    <img src="images/70.jpg" class="Sel" />
                    <img src="images/70.jpg" />
                    <img src="images/70.jpg" />
                    <img src="images/70.jpg" />
                    <img src="images/70.jpg" />
                    <img src="images/70.jpg" />
                    <img src="images/70.jpg" />
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

杂记评论(0):

上一篇：javascript实现表格排序功能　　下一篇：CSS+DIV+Javascript前端开发实例之《图片展示》（2）滚动条控制　　　 <<返回杂记列表