default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<style type="text/css">
ul, li
{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#menu li
{
text-align:center;
float: left;
padding: 5px;
margin-right: 2px;
width: 100px;
cursor: pointer;
}
#menu li.tabfocus
{
width: 100px;
font-weight: bold;
background-color: #eee;
border-bottom:0;
z-index:100;
border: solid 1px #666;
position:relative;
}
#content{ width:700px; height:80; padding:10px; background-color:#eee; border:solie 1px #6; border-bottom:0; position:relative; top:-1px; clear:left;}
#content li
{
display: none;
}
#content li.confocus
{
display: block;
}
a:hover img
{
border:5px solid red;
}
</style>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script src="js/cloud-zoom.1.0.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#F').show();
$('#menu li').each(function (index) {
$(this).mousemove(function () {
$('#menu li.tabfocus').removeClass('tabfocus');
$(this).addClass('tabfocus');
$('#content li:eq(' + index + ')').show().siblings().hide();
})
})
})
</script>
</head>
<body>
<form id="form1" >
<ul id="menu">
<li class="tabfocus">疯狂抢购</li>
<li>热卖产品</li>
<li>热评商品</li>
<li>新品上架</li>
<li>猜您喜欢</li>
</ul>
<%--<a href="zoom/big1.jpg" class='cloud-zoom' id='zoom1' rel="adjustX: -10, adjustY:40">
<img src="zoom/small1.jpg" />
</a>--%>
<ul id="content">
<li class="conclass" id="F">
<a href="Default2.aspx?address=smallFushiXiangji.jpg"><img src="images/smallFushiXiangji.jpg" /></a>
<a href="Default2.aspx?address=smallGuntong.jpg"><img src="images/smallGuntong.jpg" /></a>
<a href="Default2.aspx?address=smallGuo.jpg"><img src="images/smallGuo.jpg" /></a>
<a href="Default2.aspx?address=smallHaixin.jpg"><img src="images/smallHaixin.jpg" /></a>
<a href="Default2.aspx?address=smallJiaNengXiangji.jpg"><img src="images/smallJiaNengXiangji.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/5b48b712-d567-4f30-ae1c-2d692acbbacc.jpg" /></a>
<a href="#"><img src="images/e3660342-9d5d-4930-8cd9-38965ce37b57.jpg" /></a>
<a href="#"><img src="images/8a1191f8-27c0-4949-aea8-82093fe8e5fb.jpg" /></a>
<a href="#"><img src="images/c9d5e68c-ce47-4764-b7ef-33c6008f4268.jpg" /></a>
<a href="#"><img src="images/dbe27de8-d0f3-4e65-8427-f646a54851d8.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/smallChangpian.jpg" /></a>
<a href="#"><img src="images/smallChuliqi.jpg" /></a>
<a href="#"><img src="images/smallFamo.jpg" /></a>
<a href="#"><img src="images/smallKongtiao.jpg" /></a>
<a href="#"><img src="images/smallJiatingyingyuan.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/smallNiKang.jpg" /></a>
<a href="#"><img src="images/smallMaotai.jpg" /></a>
<a href="#"><img src="images/smallMyWorkDay.jpg" /></a>
<a href="#"><img src="images/smallLianyiqun.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/smallQianBao.jpg" /></a>
<a href="#"><img src="images/smallXiuxianku.jpg" /></a>
<a href="#"><img src="images/smallQiupai.jpg" /></a>
<a href="#"><img src="images/smallShuiyaxian.jpg" /></a>
<a href="#"><img src="images/smallXie.jpg" /></a>
</li>
</ul>
</form>
</body>
</html>
default2aspx:
后台：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string str = Request["address"].ToString();
this.zoom1.HRef = "bigimages/big"+str;
this.img1.Src = "images/" + str;
}
}
前台：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script src="js/cloud-zoom.1.0.2.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<a class = 'cloud-zoom' id='zoom1' rel="adjustX: -10, adjustY:40" runat="server">
<img id="img1" alt='' title="预览大图" style=" width:250px; height:350px" runat="server"/>
</a>
</div>
</form>
</body>
</html>
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
