用HTML+CSS+JS+一丢丢JQuery简单仿制了一个魔兽世界商店的页面(੭ ᐕ)੭（做着玩的）

效果图：

只有轮播和鼠标浮在商品上的放大特效用了我JS，其他都非常简单 |•’-’•) ✧，就是简单的放图片，控制好位置。
关于魔兽世界网站的简单仿制，我做的不止是这一张商店，还有主界面和部分登录界面，做的时候图片全部都放在了一起，现在分开超级麻烦，所以末尾上传的是这几个页面合在一起的图片库(•̀⌓•́)シ，之后的几个界面我会陆续都上传上来。

下面上代码：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta property="og:site_name" content="World of Warcraft"><meta property="og:title" content="魔兽世界"><!--  <meta property="og:image" content="http://bnetcmsus-a.akamaihd.net/cms/template_resource/fh/FHSCSCG9CXOC1462229977849.png">--><meta property="og:description" content="与无数强大的英雄一起踏上艾泽拉斯的冒险之旅，投身充满无尽魔法与挑战的广袤世界。"><meta name="renderer" content="webkit" /><title>暴雪游戏商城</title><!-- jquery --><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><!-- fontawesome字体库 --><link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="shortcut icon" href="baoxue.ico" type="image/x-icon" /><style type="text/css">#header {margin: 0;padding: 0;position: absolute;top: 0px;left: 0px;height: 100px;width: 100%;/*  background-color: transparent;*/}.header-sectionA {position: absolute;top: 0px;left: 0px;height: 50px;width: 100%;background-image: url(img/头部1背景.png);}.header-sectionA img {position: absolute;top: 10px;left: 50px;height: 30px;/*text-align:center;*/}.header-sectionA-left {float: left;}.header-sectionA-left a {text-decoration: none;/*     margin-right: 40px;*/font-size: 18px;/*     line-height: 50px;*/color: lightgray;position: relative;/*  left: 120px;*/}.header-sectionA-left a:hover {color: white;}.header-sectionA-right {float: right;}.header-sectionA-right a {text-decoration: none;font-size: 18px;line-height: 50px;color: lightgray;position: relative;right: 50px;margin-left: 20px;text-decoration: none;}.header-sectionA-right a:hover {color: white;}.header-sectionB {position: absolute;top: 50px;left: 0px;height: 50px;width: 100%;background-color: #181c5a;z-index: 2;}.header-sectionB-left {float: left;}.header-sectionB-left a {text-decoration: none;margin-right: 30px;font-size: 18px;line-height: 50px;color: lightgray;position: relative;left: 90px;}.header-sectionB-left a:hover {color: white;}.header-sectionB-left-img {position: absolute;top: 15px;left: 60px;}.header-sectionB-left-button {background-color: royalblue;border: 1px solid lightskyblue;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;color: lightgray;/*        opacity: 0.7;*/width: 200px;height: 40px;font-size: 18px;position: relative;left: 100px;margin-top: 5px;}.header-sectionB-right {float: right;position: absolute;top: 0px;right: 0px;/* background-color: blue;*/width: 780px;height: 50px;}.header-sectionB-right a {text-decoration: none;margin-right: 30px;font-size: 18px;line-height: 50px;color: lightgray;position: relative;/* right: 90px;*/}.header-sectionB-right-A {width: 100px;height: 48px;position: absolute;top: 0;right: 160px;background-color: #181c5a;/*  border: 1px solid #525256;*/border: 1px solid;border-left-color: #525256;border-right-color: #525256;/*padding-left: 10px;*/}.header-sectionB-right-A a:hover {color: white;}.header-sectionB-right form {position: absolute;right: 40px;top: 0px;/*    margin-top: 10px;*/font-size: 18px;line-height: 50px;color: lightgray;}.header-sectionB-right form:hover {color: white;}.header-sectionB-right-img {position: relative;top: 6px;/*  right: 100px;*/}input {width: 460px;border: 1px solid #525256;height: 38px;float: left;margin-top: 4px;background-image: url(img/搜索.png);background-repeat: no-repeat;color: lightgray;background-size: 18px;background-color: #171b54;background-position: 5px center;padding: 0 0 0 40px;margin-right: 50px;font-size: 20px;}article {padding: 0;margin: 0;position: absolute;top: 50px;left: 0px;width: 100%;height: 4350px;/*440*/background-color: mediumpurple;/*z-index: -1;*/}.fa {font-size: 10vh;}.swiper {width: 1540px;margin: 0 auto;vertical-align: middle;position:  relative;overflow-x: scroll;overflow-y: hidden;/*       z-index: -10;*/top: 50px;}.swiper-container {position: relative;left: 0%;width: 100%; /* 三种图片为300% */height: 100%;display: flex;/* 动画效果 */transition: left 1s ease-in-out;}.swiper-item {/*   width: calc(100%/3);*/width: 1540px;height: 280px;/*  z-index: -10;*/}::-webkit-scrollbar {width: 0;height: 0;}.butLeftCls {position: absolute;top: 15vh;left: 0.5vw;color: #fff;}.butRightCls {position: absolute;top: 15vh;right: 0.5vw;color: #fff;}.spot {position: absolute;bottom: 20px;;/*     padding: 1% 0;*/margin: 0 auto;display: flex;text-align: center;height: 30px;/*    background-color: #fbfbfb;*/color: deepskyblue;margin-left: 300px;width: 100%;
/*margin-top: 50px;*/
background-color: transparent;}.spot_01 {flex: 0.2;}/* 选中后的字体颜色 */.colCls {color: #e61673;}.colCls:after {content: '';height: 5px;margin: 0 auto;width: 20%;position: relative;bottom: -50%;background-color: #e61673;display: block;width: 100px;}.article-sectionA-second {padding: 0;margin: 0;position: absolute;/*top: 380px;*/top:329px;left: 0px;height: 60px;width: 100%;background-image: url(img/articleA-2.png);}.article-sectionA-second-text {font-size: 15px;color: lightgray;/*        background-color: whitesmoke;*/position: absolute;left: 400px;line-height: 60px;}.article-sectionA-second ul {padding: 0;margin: 0;position: absolute;top: 0px;left: 450px;height: 60px;/*      background-color: olive;*/}.article-sectionA-second li {list-style-type: none;float: left;/*padding-right: 20px;*/padding-top: 5px;/*background-color: pink;*/margin-left: 20px;width: 60px;}.pic1 {width: 50px;height: 50px;cursor: pointer;transition: all 0.3s;}.article-sectionB {padding: 0;margin: 0;position: absolute;top: 389px;left: 0px;height: 3910px;width: 100%;background-color: #181c5a;}.article-sectionB-first {padding: 0;margin: 0;position: absolute;top: 0px;left: 0px;background-image: url(img/article-sectionB-1.png);height: 70px;width: 100%;}.article-sectionB-first p {font-size: 25px;color: white;margin-left: 50px;}.article-sectionC {width: 1450px;height: 3840px;/*margin-left: 50px;margin-right: 40px;*/padding: 0;margin: 0;position: absolute;top: 70px;left: 40px;/*    background-color: aquamarine;*/}.article-sectionC-first {padding: 0;margin: 0;position: absolute;top: 0px;left: 0px;/*background-color: yellow;*/width: 100%;height: 450px;}.article-sectionC-first ul {padding: 0;margin: 0;/*position: absolute;top: 0px;left: 0px;*/}.article-sectionC-first li {float: left;list-style-type: none;/*    background-color: orange;*/margin-right: 10px;width: 280px;height: 450px;}.pho1 {width: 264px;height: 420px;cursor: pointer;transition: all 0.3s;}.article-sectionC-second {padding: 0;margin: 0;position: absolute;top: 450px;left: 0px;/* background-color: purple;*/width: 100%;height: 450px;}.article-sectionC-second ul {padding: 0;margin: 0;}.article-sectionC-second li {float: left;list-style-type: none;/*  background-color:navajowhite;*/margin-right: 10px;width: 280px;height: 450px;}.article-sectionC-third{padding: 0;margin: 0;position: absolute;top: 900px;left: 0px;background-color: #181c5a;height: 70px;width: 100%;}.article-sectionC-third p {font-size: 25px;color: white;/*margin-left: 50px;*/}.article-sectionC-fourth {padding: 0;margin: 0;position: absolute;top: 970px;left: 0px;/* background-color: purple;*/width: 100%;height: 450px;}.article-sectionC-fourth ul {padding: 0;margin: 0;}.article-sectionC-fourth li {float: left;list-style-type: none;/*      background-color:navajowhite;*/margin-right: 10px;width: 280px;height: 450px;}.article-sectionC-fifth {padding: 0;margin: 0;position: absolute;top: 1420px;left: 0px;/*background-color: purple;*/width: 100%;height: 450px;}.article-sectionC-fifth ul {padding: 0;margin: 0;}.article-sectionC-fifth li {float: left;list-style-type: none;/* background-color:navajowhite;*/margin-right: 10px;width: 280px;height: 450px;}.article-sectionC-sixth{padding: 0;margin: 0;position: absolute;top: 1870px;left: 0px;background-color: #181c5a;height: 70px;width: 100%;}.article-sectionC-sixth p {font-size: 25px;color: white;/*margin-left: 50px;*/}.article-sectionC-seventh {padding: 0;margin: 0;position: absolute;top: 1940px;left: 0px;/*  background-color: purple;*/width: 100%;height: 450px;}.article-sectionC-seventh ul {padding: 0;margin: 0;}.article-sectionC-seventh li {float: left;list-style-type: none;/*    background-color:navajowhite;*/margin-right: 10px;width: 280px;height: 450px;}.article-sectionC-eighth {padding: 0;margin: 0;position: absolute;top: 2390px;left: 0px;/*    background-color: purple;*/width: 100%;height: 450px;}.article-sectionC-eighth ul {padding: 0;margin: 0;}.article-sectionC-eighth li {float: left;list-style-type: none;/*  background-color:navajowhite;*/margin-right: 10px;width: 280px;height: 450px;}.article-sectionC-ninth{padding: 0;margin: 0;position: absolute;top: 2840px;left: 0px;background-color: #181c5a;height: 70px;width: 100%;}.article-sectionC-ninth p {font-size: 25px;color: white;/*margin-left: 50px;*/}.article-sectionC-tenth {padding: 0;margin: 0;position: absolute;top: 2910px;left: 0px;/*    background-color: purple;*/width: 100%;height: 450px;}.article-sectionC-tenth ul {padding: 0;margin: 0;}.article-sectionC-tenth li {float: left;list-style-type: none;/*    background-color:navajowhite;*/margin-right: 10px;width: 280px;height: 450px;}.article-sectionC-eleventh {padding: 0;margin: 0;position: absolute;top: 3360px;left: 0px;/*background-color: purple;*/width: 100%;height: 450px;}.article-sectionC-eleventh ul {padding: 0;margin: 0;}.article-sectionC-eleventh li {float: left;list-style-type: none;/*    background-color:navajowhite;*/margin-right: 10px;width: 280px;height: 450px;}footer {margin: 0;padding: 0;background-color: #181c5a;height: 680px;width: 1536px;/* border: 2px solid  dimgrey;*/position: relative;/*  top: 4360px;*/top:4309px;left: -8px;}.footer-img-a {width: 170px;height: auto;position: absolute;top: 80px;left: 650px;}.footer-text-a {left: 450px;position: absolute;top: 230px;list-style-type: none;}.footer-text-a li {float: left;}.footer-text-a a {text-decoration: none;float: left;font-size: 25px;color: lightgray;}.footer-text-a a:hover{color: white;}    .footer-text-a2{left:580px;position:absolute;top:270px;}.footer-text-a2 p{font-size: 18px;color: dimgrey;}.footer-text-a3{left:550px;position:absolute;top:300px;}.footer-text-a3 p{font-size: 18px;color: dimgrey;}.footer-text-b {left: 575px;top: 350px;list-style-type: none;position: absolute;}.footer-text-b li {float: left;}.footer-text-b a {text-decoration: none;float: left;font-size: 18px;color: lightgray;}.footer-text-b a :hover{color: white;}.footer-text-c {left: 360px;top: 385px;list-style-type: none;position: absolute;/* float: left;*/}.footer-text-c li {float: left;}.footer-text-c a {text-decoration: none;float: left;font-size: 17px;color: dimgrey;}.footer-text-c a:hover{color: white;}.footer-text-d {left: 450px;top: 415px;list-style-type: none;position: absolute;}.footer-text-d li {float: left;}.footer-text-d a {text-decoration: none;float: left;font-size: 17px;color: dimgrey;}.footer-text-d a:hover{color: white;}.footer-text-e {left: 450px;top: 445px;list-style-type: none;position: absolute;}.footer-text-e li {float: left;}.footer-text-e a {text-decoration: none;float: left;font-size: 17px;color: lightgray;}.footer-text-e a:hover{color: white;}.footer-text-f {left: 455px;top: 475px;list-style-type: none;position: absolute;}.footer-text-f li {float: left;}.footer-text-f a {text-decoration: none;float: left;font-size: 17px;color: dimgrey;}.footer-text-f a :hover{color: white;}.footer-text-g {left: 560px;position: absolute;top: 515px;list-style-type: none;}.footer-text-g li {float: left;}.footer-text-g li img{width: 50px;}.footer-text-g a {text-decoration: none;margin-right: 20px;}.footer-text-g a:hover{color: white;}.footer-text-h {left: 465px;position: absolute;top: 585px;list-style-type: none;}.footer-text-h li {float: left;}.footer-text-h a {text-decoration: none;float: left;font-size: 17px;color: dimgrey;}.footer-text-h a :hover{color: white;}</style></head><body><header id="header"><section class="header-sectionA"><span class="header-sectionA-left"><a href="https://cn.blizzard.com/zh-cn/"><img src="img/暴雪标志3.png"  /></a><a href="shop.html"    style="left: 140px;top: 12px;">商城</a></span><span class="header-sectionA-right"><a href="https://www.battlenet.com.cn/support/zh/?_ga=2.130603085.35398944.1571053976-1294587358.1570586229">支持</a><a>我的账户</a></span></section><section class="header-sectionB"><span class="header-sectionB-left-img"><a href="shop.html"><img src="img/房子1.png" /></a></span><span class="header-sectionB-left"><a href="shop.html"    >主页</a>    <a>游戏</a><a>服务</a><a href="https://baoxuesh.world.tmall.com/" target="_blank">周边商城</a></span><span><button  class="header-sectionB-left-button" ><B>暴雪嘉年华虚拟门票</B></button></span><span class="header-sectionB-right"><input type="text" name="search" placeholder="搜索商城" ><span class="header-sectionB-right-A"><a href="https://www.battlenet.com.cn/login/zh/?ref=https://shop.battlenet.com.cn/zh-cn/wishlist&app=shop"><!--<img  class="header-sectionB-right-img" src="img/心型图案1.png" />-->&nbsp;❤ 心愿单</a></span><form>暴雪游戏点数</form></span></section></header><article><section class="swiper"><div class="swiper-container"><a href="https://shop.battlenet.com.cn/zh-cn/product/world-of-warcraft-shadowlands"target="_blank"><img class="swiper-item" src="img/img111.jpg" ondragstart="return false;"></a><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-descent-of-dragons?p=65832"target="_blank"><img class="swiper-item" src="img/img112.jpg" ondragstart="return false;"></a><a href="https://shop.battlenet.com.cn/zh-cn/product/blizzcon-virtual-ticket"target="_blank"> <img class="swiper-item" src="img/img113.jpg" ondragstart="return false;"></a> </div><!-- 左右滑向箭头--><div class="butLeftCls" onClick='leftFun()'><i class="fa fa-angle-left"></i></div><div class="butRightCls" onClick='rightFun()'><i class="fa fa-angle-right"></i></div><div class="spot"><div class="spot_01 colCls"><!--<img src="img/qq1.png">-->❤</div><div class="spot_01">❤</div><div class="spot_01">❤</div></div></section><section class="article-sectionA-second"><!--暴雪游戏加8个小图标--><span class="article-sectionA-second-text">暴雪游戏</span><ul><li><a href="https://shop.battlenet.com.cn/zh-cn/family/world-of-warcraft"><img src="img/炉石logo (7).png" class="pic1" /></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/family/overwatch"><img src="img/炉石logo (3).png" class="pic1" /></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/family/diablo-iii"><img src="img/炉石logo (8).png"  class="pic1" /></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/family/hearthstone"><img src="img/炉石logo (1).png" class="pic1" /></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/family/heroes-of-the-storm"><img src="img/炉石logo (2).png" class="pic1" /></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/family/starcraft-ii"><img src="img/炉石logo (4).png"  class="pic1" /></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/family/starcraft-remastered"><img src="img/炉石logo (5).png" class="pic1" /></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/family/warcraft-iii"><img src="img/炉石logo (6).png" class="pic1" /></a></li></ul></section><section class="article-sectionB"><div class="article-sectionB-first"><p>推荐</p></div><section class="article-sectionC"><div class="article-sectionC-first"><ul><li><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-hex-flex-bundles"><img src="img/英雄枭雄合集.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-heroes-of-warcraft"><img src="img/炉石传说.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/world-of-warcraft-game-time-cn"><img src="img/魔兽世界游戏时间.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch?p=37693"><img src="img/守望先锋传奇典藏版.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/starcraft-ii"><img src="img/星际争霸二.png"class="pho1"></a></li></ul></div><div class="article-sectionC-second"><ul><li><a href="https://shop.battlenet.com.cn/zh-cn/product/heroes-of-the-storm"><img src="img/风暴英雄.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/world-of-warcraft-battle-for-azeroth-digital-deluxe-items"><img src="img/魔兽世界数字典藏包.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch-credits"><img src="img/守望先锋游戏货币万圣节.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/diablo-iii-premium-pack"><img src="img/暗黑破坏神3.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-classic-cn"><img src="img/经典.png" class="pho1"></a></li></ul></div><div class="article-sectionC-third"><p>精选</p></div><div class="article-sectionC-fourth"><ul><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch-credits"><img src="img/守望先锋游戏货币万圣节.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-hex-flex-bundles"><img src="img/英雄枭雄合集.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/blizzcon-virtual-ticket"><img src="img/暴雪嘉年华虚拟门票蓝色 (1).png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-saviors-of-uldum"><img src="img/奥丹姆奇兵.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch?p=37693"><img src="img/守望先锋传奇典藏版.png" class="pho1"></a></li></ul></div><div class="article-sectionC-fifth"><ul><li><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-tombs-of-terror-adventure"><img src="img/古墓惊魂冒险模式.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/warcraft-iii-reforged"><img src="img/魔兽争霸三重置版.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/starcraft-ii-war-chest"><img src="img/星际争霸三战争宝箱.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/world-of-warcraft-toy-fireworks"><img src="img/狮王之傲与部落之力烟花.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/world-of-warcraft-toy-transmorpher-beacon"><img src="img/幻变者道标.png" class="pho1"></a></li></ul></div><div class="article-sectionC-sixth"><p>当下流行</p></div><div class="article-sectionC-seventh"><ul><li><a href="https://shop.battlenet.com.cn/zh-cn/product/world-of-warcraft-game-time-cn"><img src="img/魔兽世界游戏时间.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/balance"><img src="img/暴雪游戏点数.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch?p=37693"><img src="img/守望先锋传奇典藏版.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch?p=20991"><img src="img/守望先锋数字畅玩版.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-hex-flex-bundles"><img src="img/英雄枭雄合集.png" class="pho1"></a></li></ul></div>
<div class="article-sectionC-eighth"><ul><li><a href="https://shop.battlenet.com.cn/zh-cn/product/warcraft-iii-reforged"><img src="img/魔兽争霸三重置版.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/blizzcon-virtual-ticket"><img src="img/暴雪嘉年华虚拟门票蓝色 (1).png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch-credits"><img src="img/守望先锋游戏货币万圣节.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/diablo-iii-premium-pack"><img src="img/暗黑破坏神3.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch-league-tokens"><img src="img/守望先锋联赛代币.png"class="pho1"></a></li></ul></div><div class="article-sectionC-ninth"><p>热门赠礼</p></div><div class="article-sectionC-tenth"><ul><li><a href="https://shop.battlenet.com.cn/zh-cn/product/blizzcon-virtual-ticket"><img src="img/暴雪嘉年华虚拟门票蓝色 (1).png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/balance"><img src="img/暴雪游戏点数.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch-league-tokens"><img src="img/守望先锋联赛代币.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch-credits"><img src="img/守望先锋游戏货币万圣节.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/overwatch?p=37693"><img src="img/守望先锋传奇典藏版.png"class="pho1"></a></li></ul></div><div class="article-sectionC-eleventh"><ul><li><a href="https://shop.battlenet.com.cn/zh-cn/product/world-of-warcraft-mount-vulpine-familiar"><img src="img/狡护魔使.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/world-of-warcraft-toy-transmorpher-beacon"><img src="img/幻变者道标.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/wow-15th-anniversary-alabaster-mounts"><img src="img/魔兽世界15年大理石坐骑.png" class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-hex-flex-bundles"><img src="img/英雄枭雄合集.png"class="pho1"></a></li><li><a href="https://shop.battlenet.com.cn/zh-cn/product/hearthstone-welcome-bundle-cn"><img src="img/迎新合集.png" class="pho1"></a></li></ul></div></section></section></article><footer><div><img class="footer-img-a" src="img/暴雪标志21.png"  /></div><div><ul class="footer-text-a"><li><a href="https://careers.blizzard.com/zh-cn/">工作机会&nbsp;&nbsp;&nbsp;|</a></li><li><a href="https://www.blizzard.com/zh-tw/company/about/">&nbsp;&nbsp;关于&nbsp;&nbsp;|</a></li><li><a href="https://www.battlenet.com.cn/support/zh/">&nbsp;&nbsp;支持&nbsp;&nbsp;|</a></li><li><a href="https://blizzard.gamespress.com/zh-CN">&nbsp;&nbsp;媒体中心&nbsp;&nbsp;|</a></li><li><a href="https://develop.battlenet.com.cn/">&nbsp;&nbsp;API&nbsp;&nbsp;|</a></li><li><a href="http://security.blizzard.cn/services/security/">&nbsp;&nbsp;安全中心&nbsp;&nbsp;</a></li></ul></div><div  class="footer-text-a2" ><p >©2019暴雪娱乐有限公司版权所有。</p></div><div class="footer-text-a3" ><p >在此提及的其他所有商标均是其各自所有人的财产。</p></div><div><ul class="footer-text-b"><li><a href="https://www.blizzardgames.cn/zh/legal-cn/privacy">隐私&nbsp;&nbsp;|</a></li><li><a href="https://www.blizzardgames.cn/zh/legal-cn/">&nbsp;&nbsp;法律条款&nbsp;&nbsp;|</a></li><li><a href="https://www.blizzardgames.cn/zh/legal-cn/tou">&nbsp;&nbsp;法律条款&nbsp;&nbsp;|</a></li><li><a href="https://www.wowchina.com/zh-cn/cookies">&nbsp;&nbsp;cookie&nbsp;&nbsp;</a></li></ul></div><div><ul class="footer-text-c"><li><a href="http://www.battlenet.com.cn/static/local-common/images/legal/cn/license.png">沪网文〔2017〕9633-727号&nbsp;&nbsp;|</a></li><li><a href="http://blz.nos.netease.com/1/frame/cprt/appreciation-licence.pdf">&nbsp;&nbsp;增值电信业务经营许可证编号：沪B2－20080012&nbsp;&nbsp;|</a></li><li><a href="http://beian.miit.gov.cn/state/outPortal/loginPortal.action;jsessionid=xrJ8r2YBOY8VHXxg0HdWTsYyJWeWFggpIocqzfZLDcDFLCzby4aU!-617306829">&nbsp;&nbsp;沪ICP备: 沪B2－20080012</a></li></ul></div><div><ul class="footer-text-d"><li><a>互联网违法和不良信息举报电话：0571-28090163&nbsp;|</a></li><li><a>&nbsp;沪公网安备：31011502002167&nbsp;</a></li></ul></div><div><ul class="footer-text-e"><li><a href="https://www.battlenet.com.cn/support/zh/article/280">适龄提示：适合13岁及以上使用 家长监护工程&nbsp;|</a></li><li><a href="http://blz.nos.netease.com/1/frame/cprt/self-discipline.pdf">&nbsp;上海市网络游戏行业自律公约&nbsp;</a></li></ul></div><div><ul class="footer-text-f"><li><a>上海市张江高科技园区碧波路690号5号楼301-A&nbsp;|</a></li><li><a>&nbsp;客服电话：0571-28090163&nbsp;</a></li></ul></div><div><ul class="footer-text-g"><li><a href="http://sh.cyberpolice.cn/infoCategoryListAction.do?act=initjpg"><img  src="img/末尾小图标1.gif"><!--末尾小图标1.gif-->&nbsp;</a></li><li><a href="http://www.zx110.org/"><img  src="img/末尾小图标2.gif"><!--末尾小图标2.gif-->&nbsp;</a></li><li><a href="http://www.sgs.gov.cn/lz/licenseLink.do?method=licenceView&entyId=20111011175417664"><img src="img/末尾小图标3.gif"><!--末尾小图标3.gif-->&nbsp;</a></li><li><a href="http://www.shjbzx.cn/"><img  src="img/末尾小图标4.gif"> &nbsp;</a></li><li><a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/AB216B1F9AA8456582ED680F589334A3"><img  src="img/末尾小图标5.png"> &nbsp;</a></li></ul></div><div><ul class="footer-text-h"><li><a>健康游戏忠告：抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当<br> &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</a></li></ul></div></footer><!--小图标1-8--><script>var pic = document.getElementsByClassName("pic1");for(var i= 0; i<pic.length;i++){pic[i].onmouseover = function() {this.style.width = 60 + 'px';this.style.height = 60 + 'px';}pic[i].onmouseout = function() {this.style.width = 50 + 'px';this.style.height = 50 + 'px';}}</script><!--轮播--><script th:inline="javascript">$(document).ready(function () {setTimeout('rightFun()', 2000);// 加载按钮idsetID();});var circleIndex = 0;function setID() {// 设置展开按钮idvar circleList = document.getElementsByClassName('spot_01');for (var i = 0; i < circleList.length; i++) {circleList[i].onclick = function () {arrowBack(this);};circleList[i].id = ('id', 'seeID_' + i);circleIndex++;}}// 根据按钮下标切换图片function arrowBack(that) {for (var i = 0; i < circleIndex; i++) {if (that.id == 'seeID_' + i) {$(that).addClass('colCls');$('.swiper-container').css('left', -i * 100 + '%')spotNum = i;leftDistance = -i * 100;} else if (that.id != 'seeID_' + i) {$('#seeID_' + i).removeClass('colCls');}}}var leftDistance = 0; // 滑动的leftvar spotNum = 0;var spotList = $('.spot_01').length;function leftFun() {if (leftDistance == 0) {// 三张图片 -200%$('.swiper-container').css('left', '-200%');leftDistance = -200;spotNum = spotList - 1;} else {spotNum--;leftDistance += 100;$('.swiper-container').css('left', leftDistance + '%');}for (var i = 0; i < spotList; i++) {if (i == spotNum) {$('#seeID_' + i).addClass('colCls');} else {$('#seeID_' + i).removeClass('colCls');}}}var interval;function rightFun() {clearInterval(interval);// -200 三张图片if (leftDistance == -200) {leftDistance = 0;spotNum = 0;$('.swiper-container').css('left', '0%');} else {spotNum++leftDistance -= 100;$('.swiper-container').css('left', leftDistance + '%')}if (spotNum >= spotList) {spotNum = 0}for (var i = 0; i < spotList; i++) {if (i == spotNum) {$('#seeID_' + i).addClass('colCls');} else {$('#seeID_' + i).removeClass('colCls');}}interval = setInterval('rightFun()', 4000);}</script><!--大图标--><script>var pho = document.getElementsByClassName("pho1");for(var i=0;i<pho.length;i++){pho[i].onmouseover = function() {this.style.width = 277 + 'px';this.style.height = 440 + 'px';}pho[i].onmouseout = function() {this.style.width = 264 + 'px';this.style.height = 420 + 'px';}}</script></body></html>

图片库：

用HTML+CSS+JS+一丢丢JQuery简单仿制了一个魔兽世界商店的页面(੭ ᐕ)੭（做着玩的）相关推荐

前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
HTML+CSS+JS网页设计期末课程大作业悦世界游戏介绍(7个页面) web前端开发技术 web课程设计网页规划与设计
用HTML+CSS简单仿制了一个bilibili电脑界面⚆_⚆（做着玩的）
** 效果图 **:两边的的标签是因为长截图滑动时,它会跟着一起动,实际并没有那么长(⑉･̆-･̆⑉),截图对跟着跑的东西默认截图成这样,这页面里没有js和轮播,本身想加上去,还是太懒了- 下面上代码 ...
前端面试宝典 html css js ajax es6
面试宝典一.HTML和CSS 1 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 1 3. ...
html+css+js实现科学计算器
代码地址如下: http://www.demodashi.com/demo/13751.html 项目描述纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有 ...
一节前端课：html+css+js做个计算器
QQ突然弹出来一个前端公开课的提示,由于一直想学前段的知识,点进去了,收获了一些东西,做个记录. 题目:计算器的实现技术:html+css+js 1 . body里放俩div,一个大的包一个小的,小 ...
HTML+CSS+JS+LayUI—西湖景区介绍网
博客概要简单分享基于前端技术制作完成的"西湖"景区介绍网~ 文章目录博客概要系统开发概要简单需求分析功能性需求非功能性需求页面设计 1.导航栏 2.首页 3.西湖故事 ...
canvas黑客帝国数字雨背景 html+css+js
效果(完整源码在最后): [html+css+js]黑客帝国数字雨源码分享可拿来作页面背景制作: 定义canvas标签: <canvas id="canvas">& ...
html+css+js+jQuery学习笔记
Css中"."可以选择包含两个样式的东西","可以都选上 img可以把div撑开只设置宽或者高那么将按照比列缩放扩大 Outline:none;//inpu ...

用HTML+CSS+JS+一丢丢JQuery简单仿制了一个魔兽世界商店的页面(੭ ᐕ)੭（做着玩的）

用HTML+CSS+JS+一丢丢JQuery简单仿制了一个魔兽世界商店的页面(੭ ᐕ)੭（做着玩的）相关推荐

最新文章

热门文章