Question

使用asp.net C＃web表单的动态新闻纸张布局。我正在尝试实现动态新闻纸，但没有得到如何在滑块内设置新闻纸张大小页面布局。此外，当我点击新闻报道的特定区域时，应使用Repeater控件或任何其他合适的控件在新页面中显示该区域新闻以获得此要求。

以下是我的所有代码。

   <head runat="server">
<title></title>

</head>
<body>
<form id="form1" runat="server">
    <div id="Box">
        <div class="smallbox">
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Small0.jpg" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Small1.jpg" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Small2.jpg" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Test.jpg" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Test.jpg" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Test.jpg" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Test.jpg" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Test.jpg" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Test.jpg" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="Test.jpg" />
                </a>
            </div>
        </div>

        <div id="bigbox">
            <img id="BigImg" alt="" src="" />
        </div>
        <div id="bomdiv">
            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="arrow-left.jpg" OnClientClick="return LeftChange()" />
            <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="arrow-right.jpg" OnClientClick="return RightChange()" />
        </div>
    </div>
</form>

我正在尝试实现以下任何一种网址。

http://www.epaperoheraldo.in/

http://tribune.com.pk/epaper/

注意：

大图像尺寸为900 * 552。

小图像尺寸为165 * 150。

我的屏幕尺寸为1583像素;

图像名称规则是：Small0.jpg，Small1.jpg，Small2.jpg ......... Big0.jpg，Big1.jpg，Big2.jpg ........... ...........

以上代码来自谷歌，但我试图在任何行上面实现相同。

Answer 1

要获取一些想法，请检查此代码和摘要......

window.onload = function () {
        // show default image(Big image and small image) when first open
        //eq(index) can get object through index
        $(".smallbox .subbox").eq(0).trigger("click");
    }
    //set a global variable index
    var index;
    $(function () {
        //click small box can get this index and show the Big image with this index
        $(".smallbox .subbox").click(function () {
            $("#BigImg").attr("src", $(this).find("img").attr("data-big"));
            $(".smallbox .subbox").removeClass("NewSty");
            $(this).addClass("NewSty");
            this.scrollIntoView(false);
        })
    });
    function LeftChange() {
        $(".NewSty").prev().trigger("click");
    }
    function RightChange() {
        $(".NewSty").next().trigger("click");
    }

* {
        margin: 0;
        padding: 0;
    }

::-webkit-scrollbar {
    width: 10px;
}

    #Box {
        height: 300px;
        width: 600px;
        border: 1px solid red;
    }

    .smallbox {
        width: 100px;
        height:100%;
        border: 1px solid purple;
        overflow-y: auto;
        overflow-x: auto;
        float:left;
    }

    .subbox {
        border: 1px solid yellow;
    }
    .subbox img{width:100%; height:100%;}

    #bigbox {
        width: 300px;
        height: 550px;
        border: 1px solid black;
      float:left;
      margin: 10px;
    }

    #bomdiv {
        width: 500px;
        height: 100px;
    }

    #ImageButton2 {
        margin-top: 10px;
        margin-left: 150px;
    }

   .NewSty {
     border : 2px solid blue;
        /*box-shadow: 10px 10px 5px blue;*/
    }

.newsArea{
  position:absolute;
  text-decoration:none;
  background-color: rgba(0,0,255,.1);
 }

.newsArea:hover{
    background-color: rgba(0,0,255,.5);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
    <div id="Box">
        <div class="smallbox">
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
        </div>

         <a id="ImageButton1" style="float:left;margin-top:100px;background-color:yellow;" href="#" onclick="LeftChange()"><</a>
      
        <div id="bigbox">
          <img id="BigImg" alt="" src="" style="width:100%;"/>
        </div>
           
        <a id="ImageButton2" style="float:left;margin-top:100px;background-color:yellow;" href="#" onclick="RightChange()">></a>

    </div>
      
      
      <!-- when Selected paper changed, this areas must refresh for selected page -->
      
      <a class="newsArea" style="left:150px; top:100px; width:140px; height:120px;"
              href="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG" target="_blank" onclick="alert('new page will open')">&nbsp;</a>
      
      <a class="newsArea" style="left:300px; top:40px; width:70px; height:200px;"
              href="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG" target="_blank" onclick="alert('new page will open')">&nbsp;</a>

Answer 2

使用Repeater代码替换重复的HTML代码。

示例：左侧列表包含多个项目，每个项目都包含在

中

<div class="subbox">
   <a href="#"><img alt="" src="{...}.jpg" /></a>
</div>

即，而不是<div class="smallbox">...</div>将Repeater添加为

<div class="smallbox">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
   <div class="subbox">
       <a href="#"><img alt="" src="<%# Container.DataItem.ToString() %>" /></a>
   </div>
</ItemTemplate>
</asp:Repeater>
</div>

，数据代码可以是

List<string> data = new List<string>() { "Small0.jpg", "Small1.jpg", "Small2.jpg" };
Repeater1.DataSource = data;
Repeater1.DataBind();

那应输出具有不同图像的相同html代码

<div class="subbox">
    <a href="#"><img alt="" src="Small0.jpg" /></a>
</div>
<div class="subbox">
    <a href="#"><img alt="" src="Small1.jpg" /></a>
</div>
...

使用asp.net C＃web表单的动态新闻纸张布局

2 个答案: