<!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=utf-8" />
<title>Jane shopping</title>
<link rel="stylesheet" href="styles/reset.css" type="text/css" />
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery.cookie.js" type="text/javascript"></script>
<!-- 搜索文本框效果 -->
<script src="scripts/input.js" type="text/javascript"></script>
<!-- 修改皮肤样式 -->
<script src="scripts/changeSkin.js" type="text/javascript"></script>
<!-- 导航效果 -->
<script src="scripts/nav.js" type="text/javascript"></script>
<!-- 添加hot显示 -->
<script src="scripts/addhot.js" type="text/javascript"></script>
<!-- 首页大屏广告效果 -->
<script src="scripts/ad.js" type="text/javascript"></script>
<!-- 超链接文字提示 -->
<script src="scripts/tooltip.js" type="text/javascript"></script>
<!-- 品牌活动模块横向滚动 -->
<script src="scripts/imgSlide.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery1.42.min.js"></script><script type="text/javascript" src="scripts/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
<!--头部开始-->
<div id="header">
<div class="contWidth">
<a class="logo" href="#nogo"><img src="images/logo.gif" alt="JaneShop"/></a>
<div class="search">
<input type="text" id="inputSearch" class="" value="请输入商品名称" />
</div>
<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>
<!-- 导航 start -->
<div id="nav" class="mainNav">
<ul class="nav">
<li><a href="#">首 页</a></li>
<li><a href="#" id="brand">品 牌</a>
<div class="jnNav" id="brandshow">
<div class="subitem">
<dl class="fore">
<dt>
<a href="#nogo" >品牌：</a>
</dt>
<dd >
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em ><a href="#nogo">安踏</a></em>
<em ><a href="#nogo">奥康</a></em>
<em ><a href="#nogo">骆驼</a></em>
<em ><a href="#nogo">特步</a></em>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
<dl>
<dt>
<a href="#nogo">品牌：</a>
</dt>
<dd>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em ><a href="#nogo">安踏</a></em>
<em ><a href="#nogo">奥康</a></em>
<em ><a href="#nogo">骆驼</a></em>
<em ><a href="#nogo">特步</a></em>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
</div>
</div>
</li>
<li><a href="#" id="women">女 装</a>
<div class="jnNav" id="womenshow">
<div class="subitem">
<dl class="fore">
<dt>
<a href="#nogo">女 装：</a>
</dt>
<dd>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em ><a href="#nogo">安踏</a></em>
<em ><a href="#nogo">奥康</a></em>
<em ><a href="#nogo">骆驼</a></em>
<em ><a href="#nogo">特步</a></em>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
<dl>
<dt>
<a href="#nogo">女 装：</a>
</dt>
<dd>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em ><a href="#nogo">安踏</a></em>
<em ><a href="#nogo">奥康</a></em>
<em ><a href="#nogo">骆驼</a></em>
<em ><a href="#nogo">特步</a></em>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
</div>
</div>
</li>
<li><a href="#" id="menwear">男 装</a>
<div class="jnNav" id="menwearshow">
<div class="subitem">
<dl class="fore">
<dt>
<a href="#nogo">男 装：</a>
</dt>
<dd>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em ><a href="#nogo">安踏</a></em>
<em ><a href="#nogo">奥康</a></em>
<em ><a href="#nogo">骆驼</a></em>
<em ><a href="#nogo">特步</a></em>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
<dl>
<dt>
<a href="#nogo">男 装：</a>
</dt>
<dd>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em ><a href="#nogo">安踏</a></em>
<em ><a href="#nogo">奥康</a></em>
<em ><a href="#nogo">骆驼</a></em>
<em ><a href="#nogo">特步</a></em>
<em ><a href="#nogo">耐克</a></em>
<em ><a href="#nogo">阿迪达斯</a></em>
<em ><a href="#nogo">达芙妮</a></em>
<em ><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
</div>
</div>
</li>
<li><a href="#">鞋包配饰</a></li>
</ul>
</div>
<!-- 导航 end -->
</div>
</div>
<!--头部结束-->
<!--主体开始-->
<div id="content">
<div class="janeshop">
<!-- 商品分类 start -->
<div id="jnCatalog">
<h2 title="商品分类">商品分类</h2>
<div class="jnCatainfo">
<h3>推荐品牌</h3>
<ul>
<li><a href="#nogo" >耐克</a></li>
<li><a href="#nogo" class="promoted">阿迪达斯</a></li>
<li><a href="#nogo" >达芙妮</a></li>
<li><a href="#nogo" >李宁</a></li>
<li><a href="#nogo" >安踏</a></li>
<li><a href="#nogo" >奥康</a></li>
<li><a href="#nogo" class="promoted">骆驼</a></li>
<li><a href="#nogo" >特步</a></li>
</ul>
<br class="clear" />
<h3>女装</h3>
<ul>
<li><a href="#nogo" >呢大衣</a></li>
<li><a href="#nogo" >T恤</a></li>
<li><a href="#nogo" >羽绒</a></li>
<li><a href="#nogo" >衬衫</a></li>
<li><a href="#nogo" >羊绒衫</a></li>
<li><a href="#nogo" >针织</a></li>
<li><a href="#nogo" >连衣裙</a></li>
<li><a href="#nogo" >皮外套</a></li>
</ul>
<br class="clear" />
<h3>男装</h3>
<ul>
<li><a href="#nogo" >衬衫</a></li>
<li><a href="#nogo" >T恤衫</a></li>
<li><a href="#nogo" >夹克</a></li>
<li><a href="#nogo" >大皮衣</a></li>
<li><a href="#nogo" >风衣</a></li>
<li><a href="#nogo" >牛仔裤</a></li>
<li><a href="#nogo" >西服</a></li>
<li><a href="#nogo" >卫衣</a></li>
</ul>
<br class="clear" />
<h3>鞋包配饰</h3>
<ul>
<li><a href="#nogo" >围巾</a></li>
<li><a href="#nogo" >旅行箱</a></li>
<li><a href="#nogo" >真皮包</a></li>
<li><a href="#nogo" >韩版</a></li>
<li><a href="#nogo" >达芙妮</a></li>
<li><a href="#nogo" >单肩包</a></li>
<li><a href="#nogo" >毛线</a></li>
<li><a href="#nogo" >清仓靴子</a></li>
</ul>
<br class="clear" />
</div>
</div>
<!-- 商品分类 end -->
<!-- 大屏广告 start -->
<div id="jnImageroll" class="slideBox">
<a href="#nogo" id="JS_imgWrap" class="bd">
<img src="images/ads/1.jpg" alt="相约情人节"/>
<img src="images/ads/2.jpg" alt="新款上线"/>
<img src="images/ads/3.jpg" alt="愤怒小鸟特卖"/>
<img src="images/ads/4.jpg" alt="男鞋促销第一波"/>
<img src="images/ads/5.jpg" alt="春季新品发布"/>
</a>
<div id="btnmo">
<a href="###1"><em>相约情人节</em><em>全场119元起</em></a>
<a href="###2"><em>新款上线</em><em>全场357元起</em></a>
<a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
<a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
<a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
</div>
</div>
<!-- 大屏广告 end -->
<!-- 最新动态 start -->
<div id="jnNotice">
<div id="jnMiaosha">
<a href="#nogo" class="JS_css3"><img src="images/upload/20120216.jpg" alt="冬品清仓" /></a>
</div>
<div id="jnNoticeInfo">
<h2 title="最新动态">最新动态</h2>
<ul>
<li><a href="###1" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
<li><a href="###2" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
<li><a href="###3" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
<li><a href="###4" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
<li><a href="###5" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
<li><a href="###6" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
</ul>
<br class="clear" />
</div>
</div>
<!-- 最新动态 end -->
<!-- 品牌活动 start -->
<div id="jnBrand">
<div id="jnBrandTab">
<h2 title="品牌活动">品牌活动</h2>
<ul>
<li id="sport"><a title="运动" href="#nogo">运动</a></li>
<li id="womenx"><a title="女鞋" href="#nogo">女鞋</a></li>
<li id="menx"><a title="男鞋" href="#nogo">男鞋</a></li>
<li id="chenx"><a title="Applife" href="#nogo">童鞋</a></li>
</ul>
</div>
<div id="jnBrandContent">
<div id="jnBrandList" style="background:#98bf21;position:absolute;">
<ul>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
</ul>
</div>
</div>
</div>
<!-- 品牌活动 end -->
</div>
</div>
<!--主体结束-->
<!--底部开始-->
<div id="footer">Copyright © 2009 - 2012 JaneShop Inc. </div>
<!--底部结束-->
</body>
<script>
//为轮播实现定义的两个变量
var data = {}
data[1] = "相约情人节";
data[2] = "新款上线";
data[3] = "愤怒小鸟特卖";
data[4] = "男鞋促销第一波";
data[5] = "春季新品发布";
var number = 1;
buttonlb(data[number], 1);
//轮播点击的按钮
$("#btnmo").children("a").each(function () {
$(this).mouseenter(function () {
buttonlb($(this).children("em:first").text(),null)
})
})
//根据点击去变化 或者自己循环延迟调用实现轮播
function buttonlb(name,firstcall) {
$("#JS_imgWrap").children("img").each(function () {
if (name == $(this).attr("alt")) {
$("#JS_imgWrap").children("img").css({ 'display': 'none', 'opacity': "0" });
$(this).css({ 'display': 'block', 'opacity': "1" });
for (var i = 1; i < 6; i++) {
data[i] == name ? number = i : null;
}} })
if (firstcall==1) {
number++;
number > 5 ? number = 1 : null;
setTimeout(function () { buttonlb(data[number],1); }, 2000);
}
}
//鼠标点击实现导航栏背景更换
$("#skin").children("li").each(function () {
$(this).click(function () {
$("#skin").children("li").removeClass("selected");
$(this).addClass("selected");
var rgb = colorse($(this).attr('title'));
$("#nav").css('background-color',rgb);
})
})
//汉字转RGB
function colorse(title) {
if (title=="蓝色") {
return '#4261A4';
} else if (title == "紫色") {
return '#BC3CDB';
} else if (title == "红色") {
return '#E31559';
} else if (title == "天蓝色") {
return '#0ABFCF';
} else if (title == "橙色") {
return '#FBA90D';
} else if (title == "淡绿色") {
return '#B2D500';
}
}
//导航栏下拉单
$("#brand,#women,#menwear").mouseenter(function () {
$(this).siblings(".jnNav").show();
})
$("#brand,#women,#menwear").mouseleave(function () {
$(this).siblings(".jnNav").hide();
})
//最后一部分
$("#sport,#womenx,#menx,#chenx").each(function () {
$(this).click(function () {
$(this).text() == "运动" ? $("#jnBrandList").animate({ left: '0px' },1000) : null;
$(this).text() == "女鞋" ? $("#jnBrandList").animate({ left: '-780px' },1000) : null;
$(this).text() == "男鞋" ? $("#jnBrandList").animate({ left: '-1560px' },1000) : null;
$(this).text() == "童鞋" ? $("#jnBrandList").animate({ left: '-2340px' },1000) : null;
})
})
</script>
</html>
本文介绍了如何利用jQuery库高效地修改网页的首个元素，详细讲解了选择器的使用和DOM操作步骤，适用于前端开发者提升网页交互体验。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
