<!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>倒计时</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/float.js"></script>
</head>
<body>
<div class="header">
<div class="headerCon">
<ul class="headerLeft f_l">
<li class="phone f_l"><a href="###">掌上新蛋</a></li>
<li class="customer f_l"><a href="###">企业客户</a></li>
<li class="platform f_l"><a href="###">入驻开放平台</a></li>
</ul>
<ul class="headerRight f_r">
<li class="regOrLogin f_l"><a href="###" class="f_l">注册</a><a href="###" class="f_r">登陆</a></li>
<li class="welcome f_l">上午好,欢迎来新蛋购物！</li>
<li class="myOrder f_l"><a href="###">我的订单</a></li>
<li class="myNewegg f_l" id="myNewegg">我的新蛋</li>
<li class="help f_l"><a href="###">帮助中心</a></li>
<li class="service f_l" id="service">客户服务</li>
</ul>
<div class="myNewegg2" id="myNewegg2" style="display:none;">
<p><a href="###">我的订单：1</a></p>
<p><a href="###">我的收藏：1</a></p>
<p><a href="###">我的评论：0</a></p>
<p><a href="###">我的购物车：0</a></p>
</div>
<div class="service2" id="service2" style="display:none;"></div>
</div>
</div>
<div class="searchbar">
<div class="logo f_l"><a href="###" title="新蛋中国 - 全球领先的IT/数码网上购物商城-笔记本,电脑配件,数码相机,手机,办公设备,家电,百货"><img src="images/logo.jpg" width="322" height="65" /></a></div>
<div class="search f_l"> <span>
<form action="###" method="get">
<input type="text" class="inputTxt" /><input type="submit" class="submitBut" value="搜索" />
</form>
</span>
<p><a href="###">MX100</a>|<a href="###">Ascend P6</a>|<a href="###">路由器</a>|<a href="###">电风扇</a></p>
</div>
<div class="returnGoods f_r"><a href="###" title="7天无理由退换货"><img src="images/returnGoods.gif" width="225" height="86" /></a></div>
</div>
<div class="nav">
<div class="navCon"> <span class="allClass f_l" id="menu"><i title="全部商品分类">全部商品分类</i></span>
<ul class="f_l">
<li class="f_l"><a href="###" title="首页">首页</a></li>
<li class="f_l"><a href="###" title="限时抢购">限时抢购</a></li>
<li class="f_l"><a href="###" title="团团赚">团团赚</a></li>
<li class="f_l"><a href="###" title="手机频道">手机频道</a></li>
<li class="f_l"><a href="###" title="极客生活">极客生活</a></li>
<li class="f_l"><a href="###" title="爱车配">爱车配</a></li>
</ul>
<span class="shoppingCart f_l" id="cartManage"><i id="cartManageSub">购物车 <em id="cartManageSub2">0</em> 件</i></span> <span class="collectRemind f_l" id="collectionManage"><i id="collectionManageSub">收藏提醒</i></span>
<div class="menu" id="menu2" style="display:none;">
<div class="menuArea" id="menuArea1">
<h3><a href="###">手机</a><a href="###">摄影</a></h3>
<p><a href="###" class="item1">智能手机</a><a href="###" class="item2">微单</a></p>
</div>
<div class="menuArea" id="menuArea2">
<h3><a href="###">电脑</a><a href="###">平板</a></h3>
<p><a href="###" class="item1">笔记本</a><a href="###" class="item2">平板</a><a href="###" class="item2">台机</a></p>
</div>
<div class="menuArea" id="menuArea3">
<h3><a href="###">数码</a><a href="###">外设</a></h3>
<p><a href="###" class="item1">路由器</a><a href="###" class="item2">iPad</a><a href="###" class="item2">耳机</a></p>
</div>
<div class="menuArea" id="menuArea4">
<h3><a href="###">家用电器</a></h3>
<p><a href="###" class="item1">电视</a><a href="###" class="item2">洗衣机</a><a href="###" class="item2">冰箱</a></p>
</div>
<div class="menuArea" id="menuArea5">
<h3><a href="###">厨房</a><a href="###">生活电器</a></h3>
<p><a href="###" class="item1">空气净化器</a><a href="###" class="item2">净水器</a></p>
</div>
<div class="menuArea2">
<h3>生活百货</h3>
<p><a href="###">汽车用品</a><a href="###">个护健康</a></p>
<p><a href="###">办公耗材</a><a href="###">钟表</a><a href="###">礼品</a></p>
<p><a href="###">家居</a><a href="###">食品</a><a href="###">酒饮</a><a href="###">保健</a></p>
<p><a href="###">鞋服</a><a href="###">箱包</a><a href="###">母婴</a><a href="###">玩具</a></p>
<p><a href="###">运动</a><a href="###">户外</a><a href="###">首饰</a><a href="###">美妆</a></p>
</div>
</div>
<div class="menuClass" id="menuClass1" style="display:none;"> <span class="menuBrand f_r">
<h3>热门品牌</h3>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><a href="###"><img src="images/appleLogo.jpg" /></a></td>
<td><a href="###"><img src="images/SamsungLogo.jpg" /></a></td>
</tr>
<tr>
<td><a href="###"><img src="images/sonyLogo.jpg" /></a></td>
<td><a href="###"><img src="images/huaweiLogo.jpg" /></a></td>
</tr>
<tr>
<td><a href="###"><img src="images/nikonLogo.jpg" /></a></td>
<td><a href="###"><img src="images/xiaomiLogo.jpg" /></a></td>
</tr>
</table>
</span>
<table class="menuContent">
<tr>
<td class="w62">手机</td>
<td class="w478"><a href="###">智能手机</a> | <a href="###" class="a1">对讲机</a> | <a href="###" class="a1">合约机</a> | <a href="###" class="a1">iPhone</a> | <a href="###">非智能手机</a></td>
</tr>
<tr>
<td class="w62">运营商</td>
<td class="w478"><a href="###" class="a1">合约机</a> | <a href="###">选号入网</a> | <a href="###">3G上网卡</a></td>
</tr>
<tr>
<td class="w62">手机配件</td>
<td class="w478"><a href="###">蓝牙耳机</a> | <a href="###">手机耳机 </a> | <a href="###">手机电池/充电器</a> | <a href="###">手机数据线</a> | <a href="###">车载手机配件</a> | <a href="###">手机通用配件</a> | <a href="###">手机贴膜</a> | <a href="###">手机保护套</a> | <a href="###" class="a1">移动电源</a> | <a href="###">iPhone附件</a></td>
</tr>
<tr>
<td class="w62">摄影摄像</td>
<td class="w478"><a href="###">单反相机</a> | <a href="###" class="a1">单电/微单</a> | <a href="###">镜头</a> | <a href="###">数码相机</a> | <a href="###">数码摄像机</a> | <a href="###">特殊相机</a> | <a href="###">照片打印机</a></td>
</tr>
<tr>
<td class="w62">数码附件</td>
<td class="w478"><a href="###">单反配件</a> | <a href="###">镜头滤镜 </a> | <a href="###">数码贴膜/清洁</a> | <a href="###">数码包</a> | <a href="###">三脚架/云台</a> | <a href="###">电池/充电器 </a> | <a href="###">存储卡</a> | <a href="###">MP3/MP4</a></td>
</tr>
</table>
</div>
<div class="menuClass2" id="menuClass2" style="display:none;"> <span class="menuBrand f_r">
<h3>热门品牌</h3>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><a href="###"><img src="images/thinkpadLogo.jpg" /></a></td>
<td><a href="###"><img src="images/asusLogo.jpg" /></a></td>
</tr>
<tr>
<td><a href="###"><img src="images/dellLogo.jpg" /></a></td>
<td><a href="###"><img src="images/hpLogo.jpg" /></a></td>
</tr>
<tr>
<td><a href="###"><img src="images/lenovo2Logo.jpg" /></a></td>
<td><a href="###"><img src="images/SamsungLogo.jpg" /></a></td>
</tr>
</table>
</span>
<table class="menuContent">
<tr>
<td class="w62">笔记本</td>
<td class="w478"><a href="###">智能手机</a> | <a href="###">电脑包</a> | <a href="###">智能手机</a> | <a href="###">MacBook</a> | <a href="###" class="a1">笔记本</a></td>
</tr>
<tr>
<td class="w62">平板电脑</td>
<td class="w478"><a href="###">平板电脑配件</a> | <a href="###">3G上网卡</a> | <a href="###">iPad</a> | <a href="###" class="a1">平板电脑</a></td>
</tr>
<tr>
<td class="w62">台式机</td>
<td class="w478"><a href="###">一体机</a> | <a href="###">iMac</a> | <a href="###">Mac mini</a> | <a href="###">Mac Pro</a> | <a href="###" class="a1">台式机</a></td>
</tr>
</table>
</div>
<div class="cartManage" style="display:none;">
<p>您还没有购买商品，快去挑选吧！</p>
</div>
<div class="cartManage2" id="cartManage2" style="display:none;">
<h3><em class="f_r">金额总计：<i>¥14197.00</i></em></h3>
<dl>
<dt class="f_l"><a href="###" title="ASUS 华硕 T100TA3740"><img src="images/cartManage.jpg" width="50" height="38" /></a></dt>
<dd class="f_l">
<p><a href="###" title="ASUS 华硕 T100TA3740">ASUS 华硕 T100TA3740</a></p>
<i>¥2699.00</i><em> × 2</em> </dd>
</dl>
<span> <a href="###">查看购物车 >> </a>
<input type="button" value="立即购买" />
</span> </div>
<div class="collectionManage" style="display:none;">
<p>您收藏的商品暂无动态提醒．</p>
</div>
<div class="collectionManage2" id="collectionManage2" style="display:none;">
<h3><em class="f_r">收藏数量：<i>8</i> 件</em></h3>
<dl>
<dt class="f_l"><a href="###" title="ASUS 华硕 T100TA3740"><img src="images/cartManage.jpg" width="50" height="38" /></a></dt>
<dd class="f_l">
<p><a href="###" title="ASUS 华硕 T100TA3740">ASUS 华硕 T100TA3740</a></p>
<em>收藏时间：<i>1991-10-16</i></em> </dd>
</dl>
<span> <a href="###">查看我的订单 >> </a>
<input type="button" value="管理收藏" />
</span> </div>
</div>
</div>
<div class="results">
<div class="resultsCon">
<p><a href="###">首页 > </a>限时抢购</p>
</div>
</div>
<div style="height:1000px; background:#039;"></div>
</body>
</html>
/*公共样式*/
*{ margin:0; padding:0; word-break:break-all;}
body{ font-family:"宋体"; color:#666; font-size:12px; background:#fff;}
a{ color:#666; text-decoration:none;}
a:hover{ color:#666; text-decoration:none;}
a img{ border:none;}
.f_l{ float:left;}
.f_r{ float:right;}
span{ display:block;}
i{ font-style:normal;}
em{ font-style:normal;}
ul li{ list-style-type:none;}
.c{ clear:both;}
/* CSS Document */
/*标头*/
.header{ width:100%; height:24px; background:#f1f1f1; border-bottom:1px solid #e2e2e2;}
.header a{ color:#666;}
.header a:hover{ color:#1e4c9a; text-decoration:underline;}
.header .headerCon{ width:980px; height:24px; margin:0 auto; position:relative;}
.headerCon .headerLeft{ width:260px; height:12px; padding-top:7px;}
.headerCon .headerLeft li{ line-height:12px;}
.headerCon .headerLeft .phone{ background:url(../images/phone.jpg) no-repeat; margin-left:7px; width:72px; text-align:center;}
.headerCon .headerLeft .phone:hover{ background:url(../images/phoneHover.jpg) no-repeat;}
.headerCon .headerLeft .customer{ background:url(../images/customer.jpg) no-repeat; width:70px; text-align:center; padding-left:6px;}
.headerCon .headerLeft .customer:hover{ background:url(../images/customerHover.jpg) no-repeat;}
.headerCon .headerLeft .platform{ background:url(../images/platform.jpg) no-repeat; width:104px; text-align:center;}
.headerCon .headerLeft .platform:hover{ background:url(../images/platformHover.jpg) no-repeat;}
.headerCon .headerRight{ width:520px; height:23px; margin-top:1px;}
.headerCon .headerRight li{ height:23px; line-height:23px;}
.headerCon .headerRight .regOrLogin{ width:68px; background:url(../images/regOrLogin.jpg) no-repeat 32px 0px;}
.headerCon .headerRight .welcome{ width:164px; text-align:center;}
.headerCon .headerRight .myOrder{ width:56px; text-align:center;}
.headerCon .headerRight .myNewegg{ width:73px; padding-left:11px; background:url(../images/choose.jpg) no-repeat 67px 0;}
.headerCon .headerRight .help{ width:56px; text-align:center;}
.headerCon .headerRight .service{ width:73px; padding-left:11px; background:url(../images/choose.jpg) no-repeat 67px 0;}
/*logn图片 和搜索栏 和七天退货图片*/
.searchbar{ width:980px; height:86px; margin:0 auto;}
.searchbar .logo{ width:326px; height:86px;}
.searchbar .logo img{ padding:11px 0 0 4px;}
.searchbar .search{ width:344px; margin-left:42px; margin-top:18px;}
.searchbar .search span{ width:344px; height:34px; background:url(../images/time/search2.jpg) no-repeat;}
.searchbar .search span .inputTxt{ width:236px; height:30px; border:2px solid #ff6600; line-height:30px; padding-left:6px;}
.searchbar .search span .submitBut{border:none; height:30px; width:98px; background:#ff6600; font-size:14px; font-weight:bold; color:#fff;}
.searchbar .search p{ height:30px; line-height:30px; font-family:"Arial";}
.searchbar .search p a{ padding:0 16px;}
/*导航*/
.nav{ background:#10286c; height:40px; width:100%;}
.navCon{ width:980px; height:40px; margin:0 auto; position:relative;}
.navCon .allClass{ width:179px; height:40px; background:#ff6600 url(../images/allClassImg.jpg) no-repeat 120px 19px; font-family:"微软雅黑"; color:#fff; font-size:14px; line-height:40px;}
.navCon .allClass i{ padding-left:20px;}
.navCon ul{ width:561px; height:40px; font-family:"微软雅黑"; margin-left:10px; font-size:14px;}
.navCon ul li{ padding:0 22px; line-height:40px;}
.navCon ul li:hover{ background:#295dd7;}
.navCon ul li a{ color:#fff;}
.navCon ul li a:hover{ color:#fff;}
.navCon .shoppingCart{ width:114px; height:38px; background:#ff6600 url(../images/shoppingCartORcollectRemindImg.jpg) no-repeat 95px 18px; border:2px solid #f60; border-bottom:none;}
.navCon .shoppingCart i{ padding-left:13px; line-height:38px; color:#fff;}
.navCon .shoppingCart i em{ font-family:"Arial"; color:#ffb380; font-weight:bold;}
.navCon .collectRemind{ width:108px; height:38px; background:#ff6600 url(../images/shoppingCartORcollectRemindImg.jpg) no-repeat 90px 18px; border:2px solid #f60; border-bottom:none;}
.navCon .collectRemind i{ padding-left:13px; line-height:38px; color:#fff;}
/*列表结果*/
.results{ width:100%; height:29px; background:#f0f0f0;}
.resultsCon{ width:980px; height:29px; margin:0 auto;}
.resultsCon p{ line-height:29px; font-family:"Arial"; color:#333;}
.resultsCon p a{ color:#777; text-decoration:none;}
.resultsCon p a:hover{ color:#777; text-decoration:underline;}
/*菜单*/
.menu{ width:175px; height:480px; border-left:2px solid #ff6600; border-bottom:2px solid #ff6600; border-right:2px solid #ff6600; background:#fff; font-family:"微软雅黑"; position:absolute; top:40px; left:0;}
.menu:hover{ background:#f7f7f7;}
.menu .menuArea{ width:175px; height:60px; background:url(../images/menuIcon.gif) no-repeat 146px 22px; border-bottom:1px solid #e5e5e5;}
.menu .menuArea h3{ padding-left:20px; padding-top:12px; font-size:14px; font-weight:bold;}
.menu .menuArea h3 a{ padding-right:8px; color:#333; text-decoration:none;}
.menu .menuArea h3 a:hover{ color:#039; text-decoration:underline;}
.menu .menuArea p{ padding-left:20px; padding-top:4px;}
.menu .menuArea p .item1{ color:#f60; text-decoration:none; padding-right:6px;}
.menu .menuArea p .item1:hover{ color:#f60; text-decoration:underline;}
.menu .menuArea p .item2{ color:#666; text-decoration:none; padding-right:6px;}
.menu .menuArea p .item2:hover{ color:#039; text-decoration:underline;}
.menu .menuArea2{ width:175px; }
.menu .menuArea2 h3{ padding-left:20px; padding-top:12px; font-size:14px; font-weight:bold;}
.menu .menuArea2 p{ padding-left:20px; padding-top:6px; padding-bottom:6px;}
.menu .menuArea2 p a{ color:#666; text-decoration:none; padding-right:6px; padding-bottom:8px;}
.menu .menuArea2 p a:hover{ color:#039; text-decoration:underline;}
/*菜单的分类*/
.menuClass{ width:818px; height:490px; border-bottom:1px solid #eee; border-top:1px solid #eee; border-right:1px solid #eee; position:absolute; top:30px; z-index:99; left:142px; background:#fff url(../images/menuClass01.png) no-repeat; font-family:"Arial";}
.menuClass2{ width:818px; height:490px; border-bottom:1px solid #eee; border-top:1px solid #eee; border-right:1px solid #eee; position:absolute; top:30px; z-index:99; left:142px; background:#fff url(../images/menuClass02.png) no-repeat right bottom; font-family:"Arial";}
.menuBrand{ width:203px; margin-top:16px; margin-right:24px;}
.menuBrand h3{ height:21px; line-height:21px; color:#484848; font-size:12px; font-weight:bold;}
.menuBrand table{ border-top:1px solid #f2f2f2; border-left:1px solid #f2f2f2;}
.menuBrand table tr{ height:40px;}
.menuBrand table tr td{ border-bottom:1px solid #f2f2f2; border-right:1px solid #f2f2f2; position:relative; overflow:hidden;}
.menuBrand table tr td a{ display:block; width:100px; height:40px; overflow:hidden;}
.menuBrand table tr td:hover img{ position:absolute; top:-40px; left:0;}
.menuContent{ margin-top:13px; margin-left:20px;}
.menuContent tr td{ height:26px; padding-top:6px; padding-bottom:6px; line-height:26px;}
.menuContent tr .w62{ width:62px; color:#484848; font-weight:bold;}
.menuContent tr .w478{ width:478px; color:#daccda;}
.menuContent tr .w478 a{ word-break:normal; color:#666666; display:inline-block;}
.menuContent tr .w478 .a1{ color:#f60;}
.menuContent tr .w478 a:hover{ color:#039;}
/*购物车管理*/
.cartManage{ width:226px; height:80px; border-left:2px solid #ff6600; border-bottom:2px solid #ff6600; border-right:2px solid #ff6600; background:#FFF url(../images/cartIcon.gif) no-repeat 11px 32px; position:absolute; right:0; top:40px;}
.cartManage p{ padding-top:36px; color:#999; padding-left:36px;}
.cartManage2{ width:226px; border-left:2px solid #ff6600; border-bottom:2px solid #ff6600; border-right:2px solid #ff6600; background:#fff; font-family:"Arial"; position:absolute; right:0; top:40px;}
.cartManage2 h3{ width:226px; height:35px; border-bottom:1px solid #ddd; line-height:35px;}
.cartManage2 h3 em{ color:#333; font-weight:normal; font-size:12px; padding-right:10px;}
.cartManage2 h3 em i{ color:#f60; font-family:"微软雅黑"; font-weight:bold;}
.cartManage2 dl{ width:226px; height:60px; border-bottom:1px solid #ddd; }
.cartManage2 dl:hover{ background:#f1f1f1;}
.cartManage2 dl dt{ width:64px; height:60px;}
.cartManage2 dl dt img{ width:50px; height:38px; border:1px solid #d7d7d7; margin-left:6px; margin-top:10px;}
.cartManage2 dl dd{}
.cartManage2 dl dd p{ padding-top:14px; padding-bottom:8px;}
.cartManage2 dl dd p a{ color:#333;}
.cartManage2 dl dd i{ color:#ff6600; font-family:"微软雅黑"; font-weight:bold;}
.cartManage2 dl dd em{ color:#333;}
.cartManage2 span{ width:200px; padding-left:26px; height:41px; padding-top:8px;}
.cartManage2 span a{ color:#1f47a1;}
.cartManage2 span input{ width:98px; height:34px; font-weight:bold; border:none; background:#f7661f; color:#fff;}
/*收藏管理*/
.collectionManage{ width:226px; height:80px; border-left:2px solid #ff6600; border-bottom:2px solid #ff6600; border-right:2px solid #ff6600; background:#FFF; position:absolute; right:0; top:40px;}
.collectionManage p{ padding-top:36px; color:#999; padding-left:36px;}
.collectionManage2{ width:226px; border-left:2px solid #ff6600; border-bottom:2px solid #ff6600; border-right:2px solid #ff6600; background:#fff; font-family:"Arial"; position:absolute; right:0; top:40px;}
.collectionManage2 h3{ width:226px; height:35px; border-bottom:1px solid #ddd; line-height:35px;}
.collectionManage2 h3 em{ color:#333; font-weight:normal; font-size:12px; padding-right:10px;}
.collectionManage2 h3 em i{ color:#f60; font-family:"微软雅黑"; font-weight:bold;}
.collectionManage2 dl{ width:226px; height:60px; border-bottom:1px solid #ddd; }
.collectionManage2 dl:hover{ background:#f1f1f1;}
.collectionManage2 dl dt{ width:64px; height:60px;}
.collectionManage2 dl dt img{ width:50px; height:38px; border:1px solid #d7d7d7; margin-left:6px; margin-top:10px;}
.collectionManage2 dl dd{}
.collectionManage2 dl dd p{ padding-top:14px; padding-bottom:8px;}
.collectionManage2 dl dd p a{ color:#333;}
.collectionManage2 dl dd i{ color:#ff6600; font-family:"微软雅黑"; font-weight:bold;}
.collectionManage2 dl dd em{ color:#333;}
.collectionManage2 span{ width:200px; padding-left:26px; height:41px; padding-top:8px;}
.collectionManage2 span a{ color:#1f47a1;}
.collectionManage2 span input{ width:98px; height:34px; font-weight:bold; border:none; background:#ff9d29; color:#fff;}
/*我的新蛋的菜单*/
.myNewegg2{ width:115px; font-family:"Arial"; padding-top:10px; background:#FFF; border-left:1px solid #eee; border-bottom:1px solid #eee; border-right:1px solid #eee; position:absolute; top:24px; z-index:99; right:146px;}
.myNewegg2 p{ padding-bottom:12px; padding-left:10px;}
/*客户服务的菜单*/
.service2{ width:146px; height:99px; background:url(../images/service2.png) no-repeat;border-left:1px solid #eee; border-bottom:1px solid #eee; border-right:1px solid #eee; position:absolute; top:24px; z-index:99; right:6px;}
// JavaScript Document
//根据 id 获取元素
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var myNeweggCount = 0;
var serviceCount = 0;
var menuCount = 0;
$("myNewegg").onclick = function(){
if(myNeweggCount%2==0){
myNeweggOpen();
}else{
myNeweggClose();
}
myNeweggCount++;
}
$("service").onclick = function(){
if(serviceCount%2==0){
serviceOpen();
}else{
serviceClose()
}
serviceCount++;
}
$("menu").onclick = function(){
if(menuCount%2==0){
menuOpen();
}else{
menuClose();
}
menuCount++;
}
$("menuArea1").onmousemove = function(){
menuArea1Onmousemove();
}
$("menuArea2").onmousemove = function(){
menuArea2Onmousemove();
}
$("menuArea3").onmousemove = function(){
menuArea3Onmousemove();
}
$("menuArea4").onmousemove = function(){
menuArea4Onmousemove();
}
$("menuArea5").onmousemove = function(){
menuArea5Onmousemove();
}
var cartManageCount = 0;
$("cartManage").onclick = function(){
if(cartManageCount%2==0){
cartManageOpen();
}else{
cartManageClose();
}
cartManageCount++;
}
var collectionManageCount = 0;
$("collectionManage").onclick = function(){
if(collectionManageCount%2==0){
collectionManageOpen();
}else{
collectionManageClose();
}
collectionManageCount++;
}
}
//我的新蛋菜单打开
function myNeweggOpen(){
var myNewegg = $("myNewegg");
var myNewegg2 = $("myNewegg2");
myNewegg.style.backgroundColor='#fff';
myNewegg.style.backgroundImage="url(images/chooseHover.jpg)";
myNewegg2.style.display='block';
}
//我的新蛋菜单关闭
function myNeweggClose(){
var myNewegg = $("myNewegg");
var myNewegg2 = $("myNewegg2");
myNewegg.style.backgroundColor='#f1f1f1';
myNewegg.style.backgroundImage="url(images/choose.jpg)";
myNewegg2.style.display='none';
}
//客户服务菜单打开
function serviceOpen(){
var service = $("service");
var service2 = $("service2");
service.style.backgroundColor='#fff';
service.style.backgroundImage="url(images/chooseHover.jpg)";
service2.style.display='block';
}
//客户服务菜单关闭
function serviceClose(){
var service = $("service");
var service2 = $("service2");
service.style.backgroundColor='#f1f1f1';
service.style.backgroundImage="url(images/choose.jpg)";
service2.style.display='none';
}
//menu 打开
function menuOpen(){
var menu2 = $("menu2");
menu2.style.display='block';
}
//menu 关闭
function menuClose(){
var menu2 = $("menu2");
var menuClass1 = $("menuClass1");
var menuClass2 = $("menuClass2");
menu2.style.display='none';
menuClass1.style.display='none';
menuClass2.style.display='none';
for(var i=1; i<=5; i++){
document.getElementById("menuArea"+i).style.backgroundColor="#fff";
}
}
//menuArea1
function menuArea1Onmousemove(){
var menuClass1 = $("menuClass1");
var menuClass2 = $("menuClass2");
for(var i=1; i<=5; i++){
document.getElementById("menuArea"+i).style.backgroundColor="#f7f7f7";
}
menuClass2.style.display='none';
menuArea1.style.backgroundColor='#fff';
menuClass1.style.display='block';
}
//menuArea2
function menuArea2Onmousemove(){
var menuClass1 = $("menuClass1");
var menuClass2 = $("menuClass2");
for(var i=1; i<=5; i++){
document.getElementById("menuArea"+i).style.backgroundColor="#f7f7f7";
}
menuClass1.style.display='none';
menuArea2.style.backgroundColor='#fff';
menuClass2.style.display='block';
}
//menuArea3
function menuArea3Onmousemove(){
var menuClass1 = $("menuClass1");
var menuClass2 = $("menuClass2");
for(var i=1; i<=5; i++){
document.getElementById("menuArea"+i).style.backgroundColor="#f7f7f7";
}
menuClass2.style.display='none';
menuArea3.style.backgroundColor='#fff';
menuClass1.style.display='block';
}
//menuArea4
function menuArea4Onmousemove(){
var menuClass1 = $("menuClass1");
var menuClass2 = $("menuClass2");
for(var i=1; i<=5; i++){
document.getElementById("menuArea"+i).style.backgroundColor="#f7f7f7";
}
menuClass1.style.display='none';
menuArea4.style.backgroundColor='#fff';
menuClass2.style.display='block';
}
//menuArea5
function menuArea5Onmousemove(){
var menuClass1 = $("menuClass1");
var menuClass2 = $("menuClass2");
for(var i=1; i<=5; i++){
document.getElementById("menuArea"+i).style.backgroundColor="#f7f7f7";
}
menuClass2.style.display='none';
menuArea5.style.backgroundColor='#fff';
menuClass1.style.display='block';
}
//购物车管理打开
function cartManageOpen(){
var cartManage = $("cartManage");
var cartManage2 = $("cartManage2");
var cartManageSub = $("cartManageSub");
var cartManageSub2 = $("cartManageSub2");
cartManage2.style.display='block';
cartManage.style.backgroundColor='#fff';
cartManage.style.backgroundImage="url(images/shoppingCartORcollectRemindImgHover.jpg)";
cartManage.style.border="2px solid #ff6600";
cartManage.style.borderBottom="none";
cartManageSub.style.color="#767676";
cartManageSub2.style.color="#f60";
var collectionManage = $("collectionManage");
var collectionManage2 = $("collectionManage2");
var collectionManageSub = $("collectionManageSub");
collectionManage2.style.display='none';
collectionManage.style.backgroundColor='#ff6600';
collectionManage.style.backgroundImage="url(images/shoppingCartORcollectRemindImg.jpg)";
collectionManage.style.border="2px solid #ff6600";
collectionManage.style.borderBottom="none";
collectionManageSub.style.color="#fff";
}
//购物车管理关闭
function cartManageClose(){
var cartManage = $("cartManage");
var cartManage2 = $("cartManage2");
var cartManageSub = $("cartManageSub");
var cartManageSub2 = $("cartManageSub2");
cartManage2.style.display='none';
cartManage.style.backgroundColor='#ff6600';
cartManage.style.backgroundImage="url(images/shoppingCartORcollectRemindImg.jpg)";
cartManage.style.border="2px solid #ff6600";
cartManage.style.borderBottom="none";
cartManageSub.style.color="#fff";
cartManageSub2.style.color="#ffb380";
cartManageSub2.style.fontWeight="bold";
cartManageSub2.style.fontFamily="Arial";
var collectionManage = $("collectionManage");
var collectionManage2 = $("collectionManage2");
var collectionManageSub = $("collectionManageSub");
collectionManage2.style.display='none';
collectionManage.style.backgroundColor='#ff6600';
collectionManage.style.backgroundImage="url(images/shoppingCartORcollectRemindImg.jpg)";
collectionManage.style.border="2px solid #ff6600";
collectionManage.style.borderBottom="none";
collectionManageSub.style.color="#fff";
}
//收藏管理打开
function collectionManageOpen(){
var collectionManage = $("collectionManage");
var collectionManage2 = $("collectionManage2");
var collectionManageSub = $("collectionManageSub");
collectionManage2.style.display='block';
collectionManage.style.backgroundColor='#fff';
collectionManage.style.backgroundImage="url(images/shoppingCartORcollectRemindImgHover.jpg)";
collectionManage.style.border="2px solid #ff6600";
collectionManage.style.borderBottom="none";
collectionManageSub.style.color="#767676";
var cartManage = $("cartManage");
var cartManage2 = $("cartManage2");
var cartManageSub = $("cartManageSub");
var cartManageSub2 = $("cartManageSub2");
cartManage2.style.display='none';
cartManage.style.backgroundColor='#ff6600';
cartManage.style.backgroundImage="url(images/shoppingCartORcollectRemindImg.jpg)";
cartManage.style.border="2px solid #ff6600";
cartManage.style.borderBottom="none";
cartManageSub.style.color="#fff";
cartManageSub2.style.color="#ffb380";
cartManageSub2.style.fontWeight="bold";
cartManageSub2.style.fontFamily="Arial";
}
//收藏管理关闭
function collectionManageClose(){
var collectionManage = $("collectionManage");
var collectionManage2 = $("collectionManage2");
var collectionManageSub = $("collectionManageSub");
collectionManage2.style.display='none';
collectionManage.style.backgroundColor='#ff6600';
collectionManage.style.backgroundImage="url(images/shoppingCartORcollectRemindImg.jpg)";
collectionManage.style.border="2px solid #ff6600";
collectionManage.style.borderBottom="none";
collectionManageSub.style.color="#fff";
var cartManage = $("cartManage");
var cartManage2 = $("cartManage2");
var cartManageSub = $("cartManageSub");
var cartManageSub2 = $("cartManageSub2");
cartManage2.style.display='none';
cartManage.style.backgroundColor='#ff6600';
cartManage.style.backgroundImage="url(images/shoppingCartORcollectRemindImg.jpg)";
cartManage.style.border="2px solid #ff6600";
cartManage.style.borderBottom="none";
cartManageSub.style.color="#fff";
cartManageSub2.style.color="#ffb380";
cartManageSub2.style.fontWeight="bold";
cartManageSub2.style.fontFamily="Arial";
}
效果图：
相关推荐
HTML页面选项卡是一种常见的网页...综上所述，实现HTML弹出页面选项卡涉及HTML结构、CSS样式、JavaScript交互等多个方面。通过熟练掌握这些技术，你可以创建出功能强大且用户友好的选项卡组件，提升网页的用户体验。
1. **原生JavaScript弹出框**：JavaScript提供了三种内置的弹出框：`alert()`、`prompt()`和`confirm()`。这些方法会阻塞页面的执行，直到用户与其交互完毕。 - `alert()`：显示警告消息，用户只能点击"确定"关闭...
**jQuery向上弹出透明选项卡焦点图**是一种常见的网页交互设计，它主要用于展示一组图片或内容，通过鼠标悬停在底部切换按钮上，使这些内容以透明效果从底部向上弹出，提供用户友好的浏览体验。这个设计通常用于网站...
在本主题中，我们将深入探讨如何使用JavaScript实现右键点击弹出菜单，特别是多级菜单的实现。这个功能可以极大地增强用户体验，让用户能够快速访问各种操作选项。 首先，我们需要理解事件监听器在JavaScript中的...
jQuery鼠标悬停弹出消息提示框插件，如标题所示，是基于JavaScript库jQuery的一款功能强大的Tipso插件。Tipso是一款轻量级且高度可定制的工具，它允许开发者在用户将鼠标悬停在元素上时显示丰富的提示信息，为网站...
在这个名为"jquery tab简单的招聘列表选项卡切换带点击弹出详细内容"的项目中，我们可以看到jQuery被用来实现一个招聘列表的选项卡切换功能，同时点击每个选项卡可以弹出对应的详细招聘信息。 1. **jQuery选项卡**...
首先，弹出菜单是网页设计中常见的一种交互元素，通常用于在用户点击或悬停某个按钮或链接时显示更多的选项。在京东商城的场景下，这种菜单可能用于展示商品分类、促销活动或者用户服务等信息。利用JS实现弹出菜单的...
"javascript弹出式下拉菜单"是一个关于如何使用JavaScript和HTML实现这种功能的主题。在这个主题中，我们将深入探讨下拉菜单的设计原理、JavaScript在其中的作用以及如何创建一个横向下拉菜单。 首先，我们要理解...
良好的弹出设计应具有明确的关闭选项，并尊重用户的浏览习惯。 9. **库和框架**：为了简化开发过程，许多开发者会使用预封装的库或框架，如jQuery、React、Vue等。它们提供了丰富的API和组件，能快速实现图片弹出...
JavaScript可以创建模态对话框，当用户触发特定事件（如点击按钮）时，弹出框会遮盖页面其他部分，引导用户进行操作。弹出框可以包含文本、表单、图片等多种元素，增强交互性。 5. **切换标签**：切换标签，也称为...
在这个特定的项目中，“选项卡滑动弹出文字透明背景”是一种常见的用户界面设计，它提升了用户体验，使得用户能够更加轻松地浏览和操作网页内容。这个设计通常涉及到JavaScript、HTML和CSS这三种技术的结合应用。 ...
3. **事件监听**：使用`on()`函数可以监听用户的交互事件，如点击、鼠标悬停等，根据事件来控制弹出框的显示与隐藏。 4. **CSS样式**：为了使弹出框美观并符合用户体验，我们通常需要自定义CSS样式，包括位置、大小...
弹出效果通常指的是当用户执行特定操作，如鼠标悬停或点击时，页面上出现一个临时的显示区域，提供额外的信息或者功能选项。这种效果在搜索框、下拉菜单、提示信息等方面应用广泛，可以提高用户对网站或应用程序的...
3. **事件处理**：绑定和解绑事件监听器，如点击、鼠标悬停等，以响应用户的操作，触发弹出层的显示或关闭。 4. **动画效果**：使用JavaScript的定时器（`setTimeout`或`setInterval`）和CSS3动画来实现平滑的弹出...
弹出菜单通常指的是当用户将鼠标悬停在特定元素上时，会显示一个下拉列表，提供更多的导航选项或功能。 在网页制作中，弹出菜单的设计和实现可以增加用户体验的互动性。通过Dreamweaver MX 2004内置的行为功能，...
在网页设计和开发中，弹出层是一种常见的交互元素，用于显示临时信息、警告、确认对话框或进行更复杂的操作。标题"简单的几种弹出层"暗示我们将探讨一些易于理解和使用的弹出层实现方法。描述中提到这些弹出层允许...
在网页设计中，弹出菜单是一种常见的交互元素，它能够以非侵入式的方式展示附加信息或提供操作选项。这个“弹出菜单代码文件”显然包含了一段使用JavaScript编写的弹出菜单实现代码，这对于学习网页开发特别是...
例如，我们可以为菜单项设置鼠标悬停效果，使选项卡有边框和背景色，以及关闭按钮的图标等。使用CSS3的过渡效果还可以实现平滑的动画效果，增加用户的交互感。 接下来，引入jQuery库，利用其强大的事件处理和DOM...
- **非模态对话框（Non-modal Dialog）**: 用户可以继续与背景页面交互，弹出层只是提供额外信息或操作选项。 - **提示框（Tooltip）**: 显示简短信息，通常用于鼠标悬停时显示元素的附加描述。 - **下拉菜单...