最新jQuery 仿京东选项卡及放大镜效果文档格式.docx

最新jQuery 仿京东选项卡及放大镜效果文档格式.docx

《最新jQuery 仿京东选项卡及放大镜效果文档格式.docx》由会员分享，可在线阅读，更多相关《最新jQuery 仿京东选项卡及放大镜效果文档格式.docx（16页珍藏版）》请在冰豆网上搜索。

http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>

htmlxmlns="

//www.w3.org/1999/xhtml"

headrunat="

server"

<

title>

/title>

styletype="

text/css"

ul,li

{

list-style-type:

none;

margin:

0px;

padding:

}

#menuli

text-align:

center;

float:

left;

5px;

margin-right:

2px;

width:

100px;

cursor:

pointer;

#menuli.tabfocus

font-weight:

bold;

background-color:

#eee;

border-bottom:

0;

z-index:

100;

border:

solid1px#666;

position:

relative;

#content{width:

700px;

height:

80;

10px;

#eee;

solie1px#6;

top:

-1px;

clear:

left;

}

#contentli

display:

#contentli.confocus

block;

a:

hoverimg

5pxsolidred;

/style>

scriptsrc="

js/Jquery1.7.js"

type="

text/javascript"

/script>

js/cloud-zoom.1.0.2.js"

scripttype="

$（function（）{

$（'

#F'

）.show（）;

#menuli'

）.each（function（index）{

$（this）.mousemove（function（）{

#menuli.tabfocus'

）.removeClass（'

tabfocus'

）;

$（this）.addClass（'

#contentli:

eq（'

+index+'

）'

）.show（）.siblings（）.hide（）;

}）

/head>

body>

formid="

form1"

>

ulid="

menu"

liclass="

tabfocus"

疯狂抢购<

/li>

li>

热卖产品<

热评商品<

新品上架<

猜您喜欢<

/ul>

%--<

ahref="

zoom/big1.jpg"

class='

cloud-zoom'

id='

zoom1'

rel="

adjustX:

-10,adjustY:

40"

imgsrc="

zoom/small1.jpg"

/>

/a>

--%>

content"

conclass"

id="

F"

Default2.aspx?

address=smallFushiXiangji.jpg"

images/smallFushiXiangji.jpg"

address=smallGuntong.jpg"

images/smallGuntong.jpg"

address=smallGuo.jpg"

images/smallGuo.jpg"

address=smallHaixin.jpg"

images/smallHaixin.jpg"

address=smallJiaNengXiangji.jpg"

images/smallJiaNengXiangji.jpg"

#"

images/5b48b712-d567-4f30-ae1c-2d692acbbacc.jpg"

images/e3660342-9d5d-4930-8cd9-38965ce37b57.jpg"

images/8a1191f8-27c0-4949-aea8-82093fe8e5fb.jpg"

images/c9d5e68c-ce47-4764-b7ef-33c6008f4268.jpg"

images/dbe27de8-d0f3-4e65-8427-f646a54851d8.jpg"

images/smallChangpian.jpg"

images/smallChuliqi.jpg"

images/smallFamo.jpg"

images/smallKongtiao.jpg"

images/smallJiatingyingyuan.jpg"

images/smallNiKang.jpg"

images/smallMaotai.jpg"

images/smallMyWorkDay.jpg"

images/smallLianyiqun.jpg"

images/smallQianBao.jpg"

images/smallXiuxianku.jpg"

images/smallQiupai.jpg"

images/smallShuiyaxian.jpg"

images/smallXie.jpg"

/form>

/body>

/html>

default2aspx:

后台：

usingSystem;

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Web;

usingSystem.Web.UI;

usingSystem.Web.UI.WebControls;

publicpartialclassDefault2:

System.Web.UI.Page

{

protectedvoidPage_Load（objectsender,EventArgse）

stringstr=Request["

address"

].ToString（）;

this.zoom1.HRef="

bigimages/big"

+str;

this.img1.Src="

images/"

+str;

前台：

linkhref="

css/cloud-zoom.css"

stylesheet"

runat="

divid="

aclass='

imgid="

img1"

alt='

'

title="

预览大图"

style="

250px;

350px"

/>

/div>

/html>

//www.