网页设计点小图弹出大图_怎样在网页中制作多个小缩略图然后点小图弹出大图的效果

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组件，可以自动生成缩略图，前提是服务器必须安装这个组件。

导航:首页 > 万维百科 > 网页设计点小图弹出大图

网页设计点小图弹出大图

与网页设计点小图弹出大图相关的知识