1

我想以另一种形式显示一种形式的图像。我有两个表格 index.html 和 images.html。在 index.html 中，

<html>
<head>
    <title> demo </title>   
    <style type="text/css">
        #container{
            height:100%;
            width:100%;
            postion:relative;
        }
        .divclass{
            height:auto;
            width:auto;
            position:relative;
        }
        .divclass #imgdiv1{
            margin-top:30px;
            position:relative;
            height:200px;
            width:200px;
            border:1px solid #000;
        }
    </style>    
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){                                   
            $('#imgdiv1 img').click(function(){         
                var n=$('#imgdiv1 img').length; 
                $('#lightboxdiv').append(' ('+n+')');
            });
        });
    </script>
</head>
<body>
    <div id="#container">
        <div id="lightboxdiv">
            Light Box Images
        </div>
        <div class="divclass">          
            <div id="imgdiv1">
                <img src="001_19_3.jpg" style="width:150px;height:180px;position:absolute;visible:visible;z-index:1;">
                <img src="002_21_3.jpg" style="width:150px;height:180px;position:absolute;visible:hidden;">
                <img src="003_19_3.jpg" style="width:150px;height:180px;position:absolute;visible:hidden;">
                <img src="004_19_3.jpg" style="width:150px;height:180px;position:absolute;visible:hidden;">
            </div>
        </div>
    </div>
</body>
</html>

如果我单击图像，图像计数将为 5。如果我单击计数，它将在下一个窗口中显示图像。我想获取 5 张图像并将图像显示在 images.html 中。有人可以帮忙吗？请！

4

1 回答 1

0

好的...您可以使用查询字符串来执行此操作...您的 index.html 页面看起来像这样..

<html>
<head>
<title></title>
<style type="text/css">

    .cont1
    {
        width:150px;
        height:80px;
        background-color:#bebebe;
    }

    img
    {
        display:none;
    }

    .ch:hover
    {
        cursor:pointer;
        text-decoration:underline;
    }

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var count;
        var imgbox = [];

        $('.cont1').click(function () {

            var elem = $(this);

            if ($('.ch').html() == '') {

                count = elem.children('img').length;
                $('.ch').html(count);

                for (i = 0; i < elem.children('img').length; i++) {
                    imgbox.push(elem.children('img').eq(i).attr('src'));
                }
            }
            else {

                count = count + elem.children('img').length;
                $('.ch').html(count);

                for (i = 0; i < elem.children('img').length; i++) {
                    imgbox.push(elem.children('img').eq(i).attr('src'));
                }
            }

            elem.css('border', '2px solid #000');
            elem.unbind('click');
        });

        $('.ch').click(function () {
            window.location = "images.html?allimg=" + imgbox;
        });
     });
    </script>
    </head>
    <body>
    <div class="cont1">Div1
        <img alt="" src="Images/1.jpg" width="100px" height="70px" />
        <img alt="" src="Images/2.jpg" width="100px" height="70px" />
        <img alt="" src="Images/3.jpg" width="100px" height="70px" />
    </div>
    <br />
    <div class="cont1">Div2
        <img alt="" src="Images/1.jpg" width="100px" height="70px" />
        <img alt="" src="Images/2.jpg" width="100px" height="70px" />
        <img alt="" src="Images/3.jpg" width="100px" height="70px" />
        <img alt="" src="Images/3.jpg" width="100px" height="70px" />
    </div>
    <br />
    <div class="cont1">Div3
        <img alt="" src="Images/1.jpg" width="100px" height="70px" />
        <img alt="" src="Images/2.jpg" width="100px" height="70px" />
    </div>
    <br />
    Image Count : &nbsp;&nbsp;<span class="ch"></span>
    </body>
    </html>

你的 images.html 看起来像这样..

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location.toString();
        var img = url.split('?')[1].split('=')[1];
        var imgcount = img.split(',').length;
        for (i = 0; i < imgcount; i++) {
            $('body').append('<img alt="" src="' + img.split(',')[i] + '" width="200px" height="140px" />&nbsp');
        }
     });
</script>
</head>
<body>

</body>
</html>

说明：我们正在使用 3 个 div，其中包含图像。最初，通过使用 css 属性 display:none，图像是不可见的。现在单击 div 后，它会检查计数跨度是否为空。如果它是空的，它会用 no 填充它。单击的 div 中显示的图像数量。同时我们正在使用数组。数组将填充单击的 div 中存在的所有图像的“src”并更改计数。

或者如果计数跨度不为空，那么它将添加编号。当前单击的 div 中存在的图像数量，并将图像的“src”附加到数组中并增加计数。

并且在点击计数时它会触发一个点击事件，我们正在使用 window.location = "index2.htm?allimg=" + imgbox 。这里我们使用查询字符串将数组传输到下一页。

现在在文档准备好的 images.html 页面上，我们使用 $.split() 来拆分 url 并在页面上显示图像。

如果你发现任何困难。让我知道..你可以给我发邮件@amit.kishoreda@gmail.com

于 2012-12-24T11:11:08.690 回答