網頁設計點小圖彈出大圖_怎樣在網頁中製作多個小縮略圖然後點小圖彈出大圖的效果

1、點擊小圖出現大圖的HTML代碼

我是弄出了的而且能夠使大圖不變形

<div class="xs_pic_bg">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<asp:Repeater ID="rptlagerImg" runat="server">
<ItemTemplate>
<td>
<div >
<img id="main_img" name="nameImg" alt="家居大圖" width="650" src='Admin/userfiles/Pic/<%#Eval("FUP_PicNameLarge")%>'/>
</div>
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
</div>
<div class="xs_bt_bg02">
<table cellspacing="0" cellpadding="0" width="700px" border="0">
<tr>
<td align="center">
<div class="wrapper">
<div id="prev-arrow-container">
<img id="prev-arrow" alt="向前" src="images/left3-disabled.gif"/>
</div>
<div class="carousel-component" id="html-carousel">
<div class="carousel-clip-region">
<ul class="carousel-list">
<asp:Repeater ID="repPic" runat="server">
<ItemTemplate>
<li>
<img class="thumb" height="120" src='Admin/userfiles/Pic/<%#Eval("FUP_PicNameLarge")%>'
width="120" border="0" rel='Admin/userfiles/Pic/<%#Eval("FUP_PicNameLarge")%>' />
<br class="clear1">
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>

<script type="text/javascript">

</script>

<div id="next-arrow-container">
<img id="next-arrow" alt="向後" src="images/right3-enabled.gif"/></div>
<br class="clear" />

<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
</div>
</td>
</tr>
</table>
</div>

2、html頁面裡面如何實現點擊小圖放大查看大圖

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

2、在index.html中的<style>標簽中，輸入css代碼：

div {width: 72px;height: 72px;background: url(small3.png) no-repeat;overflow: hidden;}

3、瀏覽器運行index.html頁面，此時成功將矩形圖片只顯示了正方形部分。

4、點擊小圖後，成功顯示了大圖。

3、請問這個網頁中點擊小圖彈出大圖的效果是怎麼實現的？

此網站使用的是smoothbox做的彈出效果，網址:
http://gueschla.com/labs/smoothbox/

至於圖片滾動的實現方法有很多，簡回單的方法你可答以在彈出窗口中加<iframe>然後讓他自動滾屏就好了

還有一些其他彈出窗口控制項，你可以參考一下
Awesome Box

Control.Modal

EnlargeIt!

Facebox

Fancy Zoom

4、求一個網頁 html代碼點擊左邊小圖顯示右邊大圖如圖顯示

這個不難吧。我大概寫個原理給你：

<!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>無標題文檔</title>
<script language="javascript">
function showimg(str){
.getElementById("imgshow").src=str;
}
</script>
</head>

<body>
<div id="left">
<li><img src="1.jpg" width="100" height="100" onclick="showimg('1.jpg');" /></li>
<li><img src="2.jpg" width="100" height="100" onclick="showimg('2.jpg');" /></li>
<li><img src="3.jpg" width="100" height="100" onclick="showimg('3.jpg');" /></li>
<li><img src="4.jpg" width="100" height="100" onclick="showimg('4.jpg');" /></li>
<li><img src="5.jpg" width="100" height="100" onclick="showimg('5.jpg');" /></li>
<li><img src="6.jpg" width="100" height="100" onclick="showimg('6.jpg');" /></li>
<li><img src="7.jpg" width="100" height="100" onclick="showimg('7.jpg');" /></li>
<li><img src="8.jpg" width="100" height="100" onclick="showimg('8.jpg');" /></li>
</div>
<div id="right">
<img src="1.jpg" id="imgshow" />
</div>
</body>
</html>

5、怎樣在網頁中製作，多個小縮略圖，然後點小圖彈出大圖的效果

利用ASPJPEG組件，可以自動生成縮略圖，前提是伺服器必須安裝這個組件。

導航:首頁 > 萬維百科 > 網頁設計點小圖彈出大圖

網頁設計點小圖彈出大圖

與網頁設計點小圖彈出大圖相關的知識