Question

我在主div中创建，从服务器端创建较小的div（每个div包含数据，文本和图像）something like this

我想允许用户放大或缩小（例如，有更多的div然后是屏幕宽度），主div将保持相同的大小，只有较小的div会增大或缩小

这是我发现的一个例子这提供了我想要的解决方案，但区别在于：
1.我在运行时创建div，根据数据，div的数量可能会改变（示例显示默认图像和div）
我希望所有的div都能一起放大或缩小。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm3.aspx.vb" Inherits="TEST.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" >

        var speed = 4;
        function showImage(src) {
            var div = document.createElement("div");
            with (div.style) {
                width = "300px";
                height = "300px";
                border = "2px solid black";
                textAlign = "center";
                overflow = "auto";
            }
            document.body.appendChild(div);
            img = document.createElement("img");
            img.src = src;
            img.width = 300;
            img.height = 300;
            div.appendChild(img);
        }

        function keydown(key) {
            var k = 0;
            if (key == 187) k = speed;
            if (key == 189) k = -speed;
            if (key != 0) {
                img.width = img.width + k;
                img.height = img.height + k;
                img.style.margin = ((300 - img.height) / 2).toString() + "px";

            }
        }
    </script>
</head>
<body onkeydown="keydown(event.keyCode)" onload="showImage('http://bjstlh.com/data/wallpapers/67/WDF_1122851.jpg')">
    <form id="form1" runat="server">
    <h1>press (+) to zoom in <br /> press (-) to zoom out</h1>
    </form>
</body>
</html>

我对Javascript不太熟悉 - 任何帮助都会受到赞赏

放大div

0 个答案: