【JQuery】JQuery使用—

说一哈：此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。

一、网页基本框架

1.站点结构导航

此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。

2.网页结构框架

3.网页预览

www.igrid.top/1

二、HTML及CSS代码

1.HTML部分

<div class="div_head"><a name="index"></a><div class="div_logo"><img src="img/logo.png" height="100"></div><div class="div_bar"><table width="50%" border="0" align="right"><tbody><tr><td><a href="#index"><h2>首页</h3></a></td><td><a href="#story"><h2>剧情</h3></a></td><td><a href="#switch"><h2>平台</h3></a></td><td><a href="#about"><h2>关于</h3></a></td></tr></tbody></table></div>
</div>
<div class="div_index"><div class="div_leftword"><p class="p_2">超级马里奥</p><p class="p_1">奥德赛</p><p class="p_3">スーパーマリオ オデッセイ</p></div><div class="div_rightword"><div id="clock2"></div></div><div class="div_centerpic"><img src="img/fengmian.png"></div>
</div>
<div class="div_story"><a name="story"></a><div class="div_leftstory"><div class="div_leftstoryText"><p class="p_storyjuqing">剧情设计</p><p class="p_textabout">游戏故事叙述库巴绑走碧姬公主与来自帽子之国的帽子精灵女孩“缇雅菈”，逼迫碧姬公主与它结婚。身为碧姬公主爱人的玛利欧，为阻止婚礼，与缇雅菈的哥哥帽子精灵“恰比”连手，搭乘帽子型飞船“奥德赛号”周游世界，施展恰比附身的神奇帽子，拯救心爱的人归来。</p></div><div class="div_leftstoryPic"><img src="img/chara01.png"></div></div><div class="div_rightstory"><div class="div_rightstoryText"><p class="p_storyjuqing2">主要任务</p><p class="p_textabout2">在途中，马里奥将会收集到散落各地的“威力月亮”，这些月亮可以驱动奥德赛号前往不同国度进行冒险。已经公布的国度有都市之国、砂之国、料理之国、森之国、帽子之国、瀑布之国、雪之国、海之国等国度。当你在通关之后，每个王国都会解锁更多的能量月亮。</p><p class="p_textabout2">在每个王国中，你都能找到金属盒子，而你的帽子“坎比”会对它评论一番。然而，当你看完通关字幕并返回这里后，你可将帽子甩在盒子上将它送上天空。随即，这个盒子会打开并为你解锁更多新的能量月亮通关之后，你将可用游戏中收集的金币为马力欧购买更多帽子及服饰，其中有部分内容可通过amiibo解锁。另外一些物品，则需通过收集能量月亮来解锁。</p></div><div class="div_rightstoryPic"><img src="img/chara01(1).png" height="500"></div></div><div class="div_storySwitch"><img src="img/bar.png" class="pic_bar"><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><table width="100%"><tbody><tr><td height="76"><table width="70%" align="center"><tbody><tr><td><img src="img/title_joycon01.png" width="150" height="425" alt=""/></td><td><marquee bgcolor="#000000" width="100%" align="middle"><img src="img/marquee/mq1.jpg" height="410px"><img src="img/marquee/mq2.jpg" height="410px"><img src="img/marquee/mq3.jpg" height="410px"><img src="img/marquee/mq4.jpg" height="410px"><img src="img/marquee/mq5.jpg" height="410px"><img src="img/marquee/mq6.jpg" height="410px"></marquee></td><td><table width="50%" align="right"><tbody><tr><td><img src="img/title_joycon02.png" width="150" height="425" alt=""/></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><p>&nbsp;</p><table width="100%" class="table_switch"><tbody><tr><td height="413"><table width="30%"><tbody><tr></tr></tbody></table></div>
</div><div class="div_switch"><a name="switch"></a><div class="div_switchMain"><img src="img/switch_logo.png" class="pic_switch"></div><div class="div_switchShare"><table width="80%" border="0" align="center" cellspacing="30"><tbody><tr><td><p><img class="pic_about" src="img/switch_pic/pic1.jpg" width="350" height="350" alt=""/></p><p class="p_switch"><strong>TV模式</strong></p></td><td><p><img class="pic_about" src="img/switch_pic/pic2.jpg" width="350" height="350" alt=""/></p><p class="p_switch"><strong>桌面模式</strong></p></td><td><p><img class="pic_about" src="img/switch_pic/pic3.jpg" width="380" height="350" alt=""/></p><p class="p_switch"><strong>手提模式</strong></p></td></tr></tbody></table></div></div><div class="div_about"><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;<a name="about"></a></p><p>&nbsp;</p><table width="80%" border="0" align="center" cellspacing="30" class="table_about"><tbody><tr><td height="862" valign = "top"><p>&nbsp;</p><table width="90%" border="0" align="center"><tbody><tr><td valign = "top"><img src="img/about.jpg" width="400" height="238" alt="" class="pic_about" /><img src="img/about.png" width="400" height="227" alt=""/></td></tr></tbody></table></td><td valign = "top">&nbsp;<h2>超级马里奥：奥德赛</h2><p class="p_textabout">《超级马里奥：奥德赛 》（Super Mario Odyssey）是任天堂游戏公司发行的开放世界动作冒险游戏。2017年10月27日独占登陆新主机NS。本作是睽违15年继承超级马里奥64以及阳光马里奥高自由度血脉的箱庭探索3D马里奥正统续作。游戏对应官方繁体中文和简体中文。EDGE，IGN和Gamestop均给出满分评定，媒体均给出极高的正面评价，综评网站Metacritic奥德赛的综评为97。</p><p class="p_textabout">当我们切换到「掌机模式」游玩。掌机模式如同 TV 模式，画面表现和流畅度丝毫不缩水，带来 TV 和掌机无缝接轨的游玩体验，玩家如果在家以电视探索广大的世界之时，临时有其他要事出门时，也可以马上切换成掌机模式，在外继续完整的游戏体验</p><p class="p_textabout">17年1 月14 、 15 日Nintendo Switch 体验会2017，在『超级马力欧奥德赛』的表演展场上所举办
的与开发者对谈单元邀请到 3D 马力欧生父小泉欢晃以及制作阳光马力欧的元仓健太谈论这款 3D 马力欧究竟该如何呈现。小泉欢晃解释 3D 马力欧有两种之分，一种是像银河或 3D 乐园这种在进入游戏一开始就已经决定好过关方向的通关型及 64 或阳光这种在一个关卡内设置好几种过关点的箱庭探索型。</p><p class="p_textabout">这是继1996年N64平台《超级马里奥64》和2002年GC平台《超级马里奥：阳光》后，系列再度迎来沙箱风格的3D游戏。探索充满秘密和惊喜的大型3D王国，游戏场景涵盖城镇、森林、沙漠、果园等，马里奥将乘坐飞空艇在不同的主题世界来回穿梭，包括纽约风格的大都市“纽当城”（New Donk City）和“树林王国”（Wooded Kingdom）等。</p><p class="p_textabout">游戏故事叙述库巴绑走碧姬公主与来自帽子之国的帽子精灵女孩“缇雅菈”，逼迫碧姬公主与它结婚。身为碧姬公主爱人的玛利欧，为阻止婚礼，与缇雅菈的哥哥帽子精灵“恰比”连手，搭乘帽子型飞船“奥德赛号”周游世界，施展恰比附身的神奇帽子，拯救心爱的人归来。</p></td></tr></tbody></table></p><p>&nbsp;</p><p>&nbsp;</p><img src="img/bar.png" class="pic_bar"><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><table width="60%" align="center" class="report_table"><tbody><tr><td><form id="form1" name="form1" method="post"><p class="p_2">&nbsp;</p><p class="p_2">调查问卷</p><p class="p_2">&nbsp; </p></form><table width="50%" align="center"><tbody><tr><td><form id="form2" name="form2" method="post"><p><label for="textfield">姓名:</label><input type="text" name="textfield" id="textfield"></p><p><label for="select">性别:</label><select name="select" id="select"><option value="1">男</option><option value="2">女</option><option value="3">随便</option></select></p><p><label for="date">哪年生的:</label><input type="date" name="date" id="date"></p><p>您是:                        </p><p><label><input type="radio" name="你是:" value="0" id="你是:_0">游戏爱好者</label><br><label><input type="radio" name="你是:" value="1" id="你是:_1">老任忠实粉</label><br><label><input type="radio" name="你是:" value="2" id="你是:_2">超级社会王</label><br><label><input type="radio" name="你是:" value="3" id="你是:_3">论坛技术宅</label></p><p><label for="range">&quot;买不买&quot;指数:</label>不买<input name="range" type="range" id="range" autocomplete="off">买</p><table width="40%" align="center"><tbody><tr><td><input type="submit" name="submit" id="submit" value="交了吧"><input type="reset" name="reset" id="reset" value="不想交了"></td></tr></tbody></table><p>&nbsp;</p><p><br></p></form></td></tr></tbody></table></tr></tbody></table></div><div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; top: 0px;">  <div class="div_float"><a href="#index" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button"></a><p></p><a href="#story" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button1','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button1"></a><p></p><a href="#switch" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button2','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button2"></a><p></p><a href="#about" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button3','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button3"></a></div></div> <div><p class="p_copy">沧州师范学院&copy;</p></div>

2.CSS部分

body {/*background-color: #AECD7D;*/background-color:#C90103;
}
.div_head{width: 100%;height: 130px;
}
.div_logo{width:auto;height:100px;margin-left: 100px;margin-top: 20px;float: left;
}
.div_bar{width: 800px;height: 100px;margin-top: 30px;margin-right: 80px;float: right;
}
.div_index{height: 560px;width: 100%;
}
.div_leftword{height: 600px;width: 500px;position: absolute;top: 300px;left: 50px;
}
.div_rightword{height: 600px;width: 500px;position: absolute;top: 350px;left: 1100px;
}
.div_centerpic{width: 300px;height: 800px;margin-left: 200px;position: absolute;top: 126px;left: 450px;
}
.div_story{height: 2000px;width: 100%;
}
.div_leftstory{height: 430px;width: 100%;background-color: white;
}
.div_leftstoryText{width: 30%;position:absolute;top: 860px;left: 200px;vertical-align: middle;
}
.div_leftstoryPic{width: 40%;position:absolute;top: 820px;right: 50px;
}
.div_rightstory{height: 650px;
}
.div_rightstoryText{width: 30%;position: absolute;top: 1350px;right: 300px;
}
.div_rightstoryPic{width: 40%;position: absolute;top: 1200px;left: 160px;
}
.div_storySwitch{height: 600px;width: 100%;
}
.div_switch{height: 1000px;
}
.div_switchMain{height: 800px;
}
.div_switchShare{width: 100%;background-color: #FFFFFF;height: 500px;
}
.div_about{height: 2200px;}
.div_float{height: 300px;width: 60px;margin-top: 300px;
}.pic_switch{position: absolute;top: 2600px;left: 650px;width: 400px;height: auto;
}
.pic_bar{float: right;
}
.p_2{text-align: center;color: #000000;font-family:"font1";font-size: 40px;margin: 0 auto;
}
.p_1{text-align: center;color: #FFFFFF;font-family:"font1";font-size: 80px;margin: 0 auto;
}
.p_3{text-align: center;color: #000000;font-family:"font1";font-size: 19px;margin: 0 auto;
}
.p_about{font-size: 10px;color: #FFFFFF;text-indent: 2em;font-family: "微软雅黑";
}
.p_copy{text-align: center;font-family:"微软雅黑";color:#FFFFFF;font-size: 15px;
}.pic_about{border-radius: 5px;
}
.p_textabout{text-indent: 2em;
}.p_switch{text-align: center;font-size: 20px;font-family: "微软雅黑";
}
.p_storyjuqing{font-family: "微软雅黑";font-size: 20px;font-weight: bold;
}
.p_storyjuqing2{font-family: "微软雅黑";font-size: 20px;font-weight: bold;color: #FFFFFF;
}
.p_textabout2{text-indent: 2em;color: #FFFFFF;
}
.report_table{background-color: #FFFFFF;border-radius: 5px;
}
.table_about{background: #FFFFFF;
}
li{list-style:none;
}
@font-face {font-family:"font1";src:url(../font1.TTF);
}

三、JQuery的引用和使用

1.JQuery引用

1.下载JQuery库并放在自己网页的目录下 https://jquery.com/download/

2.在html内引入库文件

<script src="js/jquery.js" type="text/javascript"></script>

3.尽情造作吧~

2.JQuery的使用

1.流畅的锚点

先在html中写一个浮动的div，在里面写出普通的锚点，格式如下：

<a href="#story"></a>

加上鼠标经过图像，成品代码如下：

<div class="div_float"><a href="#index" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button"></a><p></p><a href="#story" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button1','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button1"></a><p></p><a href="#switch" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button2','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button2"></a><p></p><a href="#about" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button3','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button3"></a>
</div>

在<script type="text/javascript"><script>中加入如下效果代码

$(document).ready(function() {  $('a[href*=#]').click(function() {  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {  var $target = $(this.hash);  $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');  if ($target.length) {  var targetOffset = $target.offset().top;  $('html,body').animate({  scrollTop: targetOffset  },  1000);  return false;  }  }  });
});

2.好看的小表za

模板，网上大把大把的，其他使用同理。

html内先引入下网上的模板js文件

<script src="js/jquery.MyDigitclock.js"></script>

在<script type="text/javascript"><script>中加入如下效果代码

$(document).ready(function(){$(function(){$("#clock2").MyDigitClock({fontSize:70, fontFamily:"Century gothic", fontColor: "#FFF", fontWeight:"bold", bAmPm:true,background:'#C90103',bShowHeartBeat:true});
});
});

写一个div，id为clock2

<div class="div_rightword"><div id="clock2"></div>

完成

四、结束啦

第一次分享自己的东西，很多地方说的不好，以后会慢慢丰富自己的，啾咪！