<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %> <!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>Jane Shopping</title> <link type="text/css" href="Styles/base.css" rel="Stylesheet" /> <link type="text/css" href="Styles/header.css" rel="Stylesheet" /> <link type="text/css" href="Styles/nav.css" rel="Stylesheet" /> <link type="text/css" href="Styles/content.css" rel="Stylesheet" /> <link type="text/css" href="Styles/skin/skin_0.css" rel="Stylesheet" id="cssfile"/> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery.cookie.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function () { //换肤效果 var $li = $("#skin li"); $li.click(function () { switchSkin(this.id); }); var cookie_skin = $.cookie("MyCssSkin"); if (cookie_skin) { switchSkin(cookie_skin); } //导航效果 $("#navigation ul li:has(ul)").hover(function () { $(this).children("ul").stop(true, true).slideDown(400); }, function () { $(this).children("ul").stop(true, true).slideUp("fast"); }); //左侧模块展开与关闭 $(".module_up_down").toggle(function () { $(this).prev().slideUp(600); $(this).children("img").attr("src", "images/up.gif"); }, function () { $(this).prev().slideDown(600); $(this).children("img").attr("src", "images/down.gif"); }); //左侧最新动态模块内容滚动 $this = $(".scrollNews"); var scollTime; $this.hover(function () { clearInterval(scollTime); }, function () { scollTime = setInterval(function () { scollNews($this); }, 3000); }).trigger("mouseleave"); //左侧最新动态模块内容添加超链接提示 var x = 10; var y = 20; var myTitle; $(".tooltip").mouseover(function (event) { myTitle = this.title; this.title = ""; var newTip = '<div id="tooltip">' + myTitle + '</div>'; $("body").append(newTip); $("#tooltip").css({ left: event.pageX + x, top: event.pageY + y }).show("fast"); }).mouseout(function () { this.title = myTitle; $("#tooltip").remove(); }); //左侧最新产品分类树 $(".m-expanded > span").toggle(function () { $(this).next("ul").slideUp(400); $(this).parent().attr("class", "m-collapsed"); }, function () { $(this).next("ul").slideDown(400); $(this).parent().attr("class", "m-expanded"); }); //右侧上部产品广告效果 var adLen = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function () { index = $(".num li").index(this); showImg(index); }).eq(0).mouseover(); $('.ad').hover(function () { clearInterval(adTimer); }, function () { adTimer = setInterval(function () { showImg(index) index++; if (index == adLen) { index = 0; } }, 3000); }).trigger("mouseleave"); //右侧下半部分列表横向滚动效果图 var page = 1; var i = 4; //每页显示4张图片 var len = $(".prolist_content ul li").length; var pagecount = Math.ceil(len / i); var width = $('.prolist').width(); $(".goRight").click(function () { if (!$(".prolist_content").is(".animated")) { if (page == pagecount) { $(".prolist_content").animate({ left: 0 }, 800); page = 1; } else { $(".prolist_content").animate({ left: "-=" + width + "px" }, 800); page++; } } }); $(".goLeft").click(function () { if (!$(".prolist_content").is(":animated")) { if (page == 1) { $(".prolist_content").animate({ left: '-=' + (pagecount - 1) * width }, 800); page = pagecount; } else { $(".prolist_content").animate({ left: '+=' + width }, 800); page--; } } }); //右侧下部光标滑过产品列表的效果 $(".content_right .prolist ul li").each(function () { var position = $(this).position(); var li_left = position.left; var li_top = position.top; var img_width = $(this).find("img").width(); var img_height = $(this).find("img").height(); var spanHtml = '<span style="position: absolute; top: '+li_top+'px; left: '+li_left+'px; width:'+img_width+'px; height: '+img_height+'px; cursor: pointer;" class="imageMask"></span>'; $(spanHtml).hover(function () { $(this).addClass("imageOver"); }, function () { $(this).removeClass("imageOver"); }).appendTo($(this).find("a")); }); }); /*网页换肤效果*/ function switchSkin(skinName) { $("#" + skinName).addClass("selected") .siblings().removeClass("selected"); $("#cssfile").attr("href", "Styles/skin/" + skinName + ".css"); $.cookie("MyCssSkin", skinName, { path: '/', expires: 10 }); } //滚动新闻 function scollNews(obj) { var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); $self.animate({ "margin-top": - lineHeight + "px" }, 600, function () { $self.css("margin-top", 0).find("li:first").appendTo($self); }); } //显示图片 function showImg(index) { var adheight = $(".content_right .ad").height(); $(".slider").stop(true, false).animate({ "top": -adheight * index }, 1500); $(".num li").removeClass("on") .eq(index).addClass("on"); } </script> </head> <body> <form id="form1" runat="server"> <div id="header"> <a id="logo" href="#">Jane Shopping</a> <ul id="skin"> <li id="skin_0" title="蓝色" class="selected">蓝色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色">天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> </div> <div id="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">衬衫</a> <ul> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">无袖衬衫</a></li> </ul> </li> <li><a href="#">卫衣</a> <ul> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> </ul> </li> <li><a href="#">裤子</a> <ul> <li><a href="#">休闲裤</a></li> <li><a href="#">卡其裤</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">短裤</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div> <div id="content"> <div class="content_left"> <div class="global_module news"> <h3> 最新动态</h3> <div class="scrollNews"> <ul> <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li> <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li> <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li> <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li> <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li> <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li> <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li> </ul> </div> <p class="module_up_down"> <img src="images/down.gif" alt="" /></p> </div> <div class="global_module procatalog"> <h3> 产品分类</h3> <ul class="m-treeview"> <li class="m-expanded"><span>衬衫</span> <ul> <li><span>短袖衬衫</span></li> <li><span>长袖衬衫</span></li> </ul> </li> <li class="m-expanded"><span>卫衣</span> <ul> <li><span>开襟卫衣</span></li> <li><span>套头卫衣</span></li> </ul> </li> <li class="m-expanded"><span>裤子</span> <ul> <li><span>休闲裤</span></li> <li><span>免烫卡其裤</span></li> <li><span>牛仔裤</span></li> <li><span>短裤</span></li> </ul> </li> </ul> <p class="module_up_down"> <img src="images/down.gif" alt="" /></p> </div> </div> <div class="content_right"> <div class="ad"> <ul class="slider"> <li> <img src="images/ads/1.gif" /></li> <li> <img src="images/ads/2.gif" /></li> <li> <img src="images/ads/3.gif" /></li> <li> <img src="images/ads/4.gif" /></li> <li> <img src="images/ads/5.gif" /></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="global_module prolist"> <h3> 新款上市</h3> <div class="prolist_content"> <ul> <li><a href="details.aspx"> <img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span> </li> <li><a href="details.aspx"> <img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li><a href="details.aspx"> <img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li><a href="details.aspx"> <img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li><a href="details.aspx"> <img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span> </li> <li><a href="details.aspx"> <img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li><a href="details.aspx"> <img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li><a href="details.aspx"> <img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li><a href="details.aspx"> <img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span> </li> <li><a href="details.aspx"> <img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li><a href="details.aspx"> <img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li><a href="details.aspx"> <img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> </ul> </div> <p class="module_left_right"> <img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p> </div> </div> </div> </form> </body> </html>