<!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 href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
//1.制作广告弹窗
//window.open("open.html","","width=500,height=300");
//2.制作随滚动条滚动的广告
$(window).scroll(function(){
var st = $(this).scrollTop()+50;//scrollTop()返回或设置匹配元素的滚动条的垂直位置。
$("#right").css("top",st) //设置div相对于其顶部的偏移。
})
$("#right").find("a").click(function(){
$("#right").hide();
})
//3.制作轮换图片
function scrollImg(){
var $img = $("#scroll_img").children("li");
var $num = $("#scroll_number").children("li");
var index = 0;
var flag = false;
$num.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over"); //stop(true,true)当移入一个指定元素的时候，停止所有加入队列的动画，但是完成当前的动画
$num.mouseover(function(){
flag = true;
index = $num.index($(this));
$img.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
$(this).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
}).mouseout(function(){
flag = false;
})
setInterval(function(){
if(flag)
return; //flag=true时数字图片改色且显示当前对应的图片并停止执行方法，否则index添加
index++;
if(index>$img.length){
index=0;
}
$img.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
$num.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
},3000)
}
scrollImg();
//3.tab切换效果
$("#bookTab").children(".book_new").find("[id]").mouseover(function(){
var id = "#book_"+$(this).attr("id");
$("#bookTab").children(".book_class").find("[id]").hide();
//$(this).addClass("book_type_out").siblings().removeClass("book_type_out");可选
$(id).show();
})
//4.鼠标经过内容效果
$("#bookTab").children(".book_class").find("dd").mouseover(function(){
$(this).css("border","2px solid #F96");
}).mouseout(function(){
$(this).css("border","2px solid #fff");
})
//5.书讯快递循环向上滚动
function scrollTop(){
var margintop = 0;
var flag = false;
setInterval(function(){
if(flag) return;
$("#express").children("li").first().animate({"marginTop":margintop--},0,function(){ //0为动画的持续时间，function为执行完动画后的回调函数
//var $first = $(this)
//if(!$first.is(":animated")){
if((-margintop)>$(this).height()){
$(this).css("margin-top",0).appendTo("#express");
margintop=0;
}
//}
})
},20)
$("#express").mouseover(function(){
flag = true;
}).mouseout(function(){
flag = false;
})
}
scrollTop();
})
</script>
</head>
<body>
<!--随滚动条滚动可关闭广告-->
<div id="right" class="right">
<div class="dd_close" id="dd_close"><a href="javascript:void(0);">关闭</a></div>
<img src="images/dd_scroll.jpg" id="right1" />
</div>
<!--头部iframe引入-->
<div id="header">
<iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe>
</div>
<!--网站中间内容开始-->
<div id="main">
<div class="dd_index_top_adver"><img src="images/dd_index_top_adver.jpg" alt="通栏广告图片" /></div>
<!--左侧菜单开始-->
<div id="catList">
<!--推荐分类-->
<div class="book_sort">
<div class="book_sort_bg">推荐分类</div>
<div class="book_sort_bottom" style="border-bottom:0px;">外语 | 中小学教辅 |</div>
</div>
<!--图书商品分类开始-->
<div class="book_sort">
<div class="book_sort_bg"><img src="images/dd_book_cate_icon.gif" alt="图书" /> 图书商品分类</div>
<div class="book_cate">[小说]</div>
<div class="book_sort_bottom">悬疑 | 言情 | 职场 | 财经</div>
<div class="book_cate">[文艺]</div>
<div class="book_sort_bottom">文学 | 传记 | 艺术 | 摄影</div>
<div class="book_cate">[青春]</div>
<div class="book_sort_bottom">青春文学 | 动漫 | 幽默</div>
<div class="book_cate">[励志/成功]</div>
<div class="book_sort_bottom">修养 | 成功 | 职场 | 沟通</div>
<div class="book_cate">[少儿]</div>
<div class="book_sort_bottom">0-2 | 3-6 | 7-10 | 11-14<br />文学 | 科普 | 图画书</div>
<div class="book_cate">[生活]</div>
<div class="book_sort_bottom">保健 | 家教 | 美丽装扮 | 育儿 | 美食 | 旅游 | 收藏 | 生活 | 体育 | 地图 | 个人理财</div>
<div class="book_cate">[个人社科]</div>
<div class="book_sort_bottom">文化 | 历史 | 哲学/宗教 | 古籍 | 政治/历史 | 法律 | 经济 | 社会科学 | 心理学</div>
<div class="book_cate">[管理]</div>
<div class="book_sort_bottom">管理 | 金融 | 营销 | 会计</div>
<div class="book_cate">[科技]</div>
<div class="book_sort_bottom">科普 | 建筑 | 医学 | 计算机 | 农林 | 自然科学 | 工业 | 通信</div>
<div class="book_cate">[教育]</div>
<div class="book_sort_bottom">教材 | 中小学教辅 | 外语</div>
<div class="book_cate">[工具书]</div>
<div class="book_cate">[图外原版书]</div>
<div class="book_cate">[期刊]</div>
</div>
<!--图书商品分类结束-->
</div>
<!--左侧菜单结束-->
<!--中间部分开始-->
<div id="content">
<!--轮换显示的横幅广告图片-->
<div class="scroll_top"></div>
<div class="scroll_mid">
<ul id="scroll_img">
<li><img src="images/dd_scroll_1.jpg"/></li>
<li><img src="images/dd_scroll_2.jpg"/></li>
<li><img src="images/dd_scroll_3.jpg"/></li>
<li><img src="images/dd_scroll_4.jpg"/></li>
<li><img src="images/dd_scroll_5.jpg"/></li>
<li><img src="images/dd_scroll_6.jpg"/></li>
</ul>
<ul id="scroll_number">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="scroll_end"></div>
<!--最新上架开始-->
<div id="bookTab" class="book_sort">
<div class="book_new">
<div class="book_left">最新上架</div>
<div class="book_type book_type_out" id="history">历史</div>
<div class="book_type" id="family">家教</div>
<div class="book_type" id="culture">文化</div>
<div class="book_type" id="novel">小说</div>
<div class="book_right"><a href="#">更多>></a></div>
</div>
<div class="book_class" style="height:250px;">
<!--历史-->
<dl id="book_history">
<dt><img src="images/dd_history_1.jpg" alt="history"/></dt>
<dd>
<font class="book_title">《中国时代》�
JavaScript网上书店项目，毕业设计项目
需积分: 44 176 浏览量
2020-02-23
16:56:54
上传
评论 14
收藏 1.82MB ZIP 举报
JavaScript网上书店项目，毕业设计项目 （141个子文件） 
layout.css 20KB template.css 5KB global.css 920B
项目说明.docx 935KB
product_01.gif 13KB dd_book_right_adver2.gif 12KB product_02.gif 10KB login_icon_bg_01.gif 4KB register_tag_left.gif 3KB dd_scroll_top.gif 3KB dd_logo.gif 3KB register_pic_02.gif 3KB register_tag_right.gif 3KB register_pic_01.gif 3KB register_tag_mid.gif 3KB logo.gif 2KB login_header.gif 2KB register_top_bg.gif 2KB shopping_myshopping.gif 2KB shopping_balance.gif 2KB register_btn_out.gif 1KB register_btn_over.gif 1KB validate.gif 1KB dd_book_mess.gif 901B product_icon_03.gif 888B product_icon_02.gif 888B product_icon_04.gif 884B dd_bang.gif 858B dd_head_bg_right.gif 779B dd_head_bg_left.gif 776B OK.gif 677B shopping_arrow_down.gif 651B shopping_arrow_up.gif 643B dd_book_cate_icon.gif 628B next.gif 534B login_icon_bg_02.gif 382B register_write_ok.gif 369B product_page_down.gif 364B product_page_up.gif 355B register_cont.gif 345B dd_head_bg_mid.gif 302B product_buy_02.gif 246B dd_header_shop.gif 231B product_buy_01.gif 213B star_red.gif 208B star_red2.gif 206B dd_scroll_end.gif 204B star_gray.gif 201B dd_book_no_03.gif 184B dd_book_no_02.gif 183B dd_book_no_01.gif 183B register_head_bg.gif 168B product_left_top_bg.gif 150B dd_arrow_down.gif 143B product_icon_01.gif 110B dd_header_bg.gif 100B shopping_commend_bg.gif 97B product_icon_40.gif 94B product_icon_20.gif 94B dd_book_no_10.gif 66B register_shadow.gif 65B dd_book_no_04.gif 60B dd_book_no_05.gif 59B dd_book_no_06.gif 59B dd_book_no_09.gif 59B dd_book_no_08.gif 58B dd_book_no_07.gif 57B dd_arrow_right.gif 55B shopping_dotted.gif 43B register_dotted.gif 35B
index.html 27KB shopping.html 12KB register.html 8KB header.html 6KB login.html 5KB footer.html 656B open.html 442B
dd_winOpen.jpg 235KB dd_scroll_1.jpg 117KB dd_scroll_2.jpg 51KB dd_scroll_4.jpg 50KB dd_scroll_5.jpg 49KB dd_scroll_3.jpg 49KB dd_scroll_6.jpg 40KB dd_scroll.jpg 38KB dd_index_top_adver.jpg 36KB login_main_01.jpg 26KB login_main_03.jpg 19KB login_main_02.jpg 18KB dd_book_right_adver1.jpg 15KB dd_header_search_top.jpg 13KB dd_header_search_btn.jpg 12KB dd_header_3_a.jpg 9KB dd_header_1_a.jpg 9KB dd_seven_bg1.jpg 9KB dd_header_2_a.jpg 9KB dd_seven_bg2.jpg 8KB dd_book_bg1.jpg 8KB dd_book_bg2.jpg 8KB dd_book_bg.jpg 7KB共 141 条
- 1
- 2
资源评论
weixin_zlp210655
- 粉丝: 1
- 资源: 3
最新资源
- 基于GPT的AI文档分析、阅读和问答工具.txt
- 《机器人控制系统的设计与Matlab仿真 》仿真程序
- AI-免费物品无损放大工具AI在线免费放大图片工具.txt
- C++基于DPLL算法的SAT的蜂窝数独游戏求解程序,程序设计综合课程设计,包括SAT求解器板块、蜂窝数独转化成cnf公式板块
- 微信小程序恐龙快跑小程序源码.zip
- 黑苹果OC引导-0.9.1
- WinSoft-ComPort-v6.5-for-Delphi-5-11-Downloadly
- Redis 服务等过期策略和内存淘汰策略解析
- debian配置FTP服务
- 基于Matlab和CPLEX的2变量机组组合调度程序(注释完全，可直接运行)(文档加Matlab源码)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
