基于JavaScript實(shí)現(xiàn)游戲購(gòu)物車效果詳解

第基于JavaScript實(shí)現(xiàn)游戲購(gòu)物車效果詳解filter:blur(20px);

transform:translateX(300px)translateY(-300px)rotate(720deg)scale(4);

注冊(cè)界面

注冊(cè)界面html、css和js

!DOCTYPEhtml

html

head

title注冊(cè)界面/title

style

/*塊狀元素默認(rèn)寬度為100%*/

html,body{

/*高度也占全屏*/

height:100%;

/*把body的外邊距去了*/

margin:0px;

body{

/*center/cover讓圖片正確顯示*/

background:url(img/loginbg2.jpg)center/cover;

/*半透明色*/

form{

background:rgba(255,255,255,.2);

/*將表單設(shè)置為絕對(duì)布局*/

position:absolute;

/*表單中上右下左的內(nèi)邊距*/

padding:20px20px20px20px;

/*讓表單居中(絕對(duì)布局)*/

left:70%;

top:50%;

/*在自己基礎(chǔ)上右下走*/

transform:translate(-50%,-50%);

border-radius:10px;

box-shadow:6px6px10pxblack;

input{

border:1pxsolidblack;

border-radius:20px;

line-height:30px;

height:30px;

width:170px;

transition:0.5s;

input:focus{

box-shadow:8px8px15pxpapayawhip;

border:1pxsolidwhite;

border-radius:20px;

width:210px;

color:black;

color:black;

text-decoration:none;

button{

width:150px;

height:40px;

border:white;

border-radius:20px;

font-size:16px;

span{

color:red;

font-size:3px;

font-weight:bold;

font-family:"楷體";

/style

/head

body

formid="myForm"

pfontsize="5"color="rosybrown"/font/p

inputplaceholder="輸入用戶名"type="text"id="uname"onkeyup="checkLable(this,/^[a-zA-Z]{3,6}$/,'用戶名要3-7個(gè)字母')"/

span/span

inputplaceholder="輸入密碼"type="password"id="upwd"onkeyup="checkLable(this,/^\w{6,10}$/,'密碼必須6-10個(gè)數(shù)字')"/

span/span

inputplaceholder="確認(rèn)密碼"type="password"id="pwd"onkeyup="checkLable(this,/^\w{6,10}$/,'密碼必須6-10個(gè)數(shù)字')"/

span/span

buttontype="submit"b注冊(cè)/b/buttonnbsp;nbsp;ahref="Login01.html"rel="externalnofollow"登錄/a/p

/form

scripttype="text/javascript"

//表單驗(yàn)證

functioncheckLable(obj,rex,tip){

varlength=obj.value.length

varlabel=obj.parentElement.getElementsByClassName('xx')[0]

if(length){

if(rex.test(obj.value)){//根據(jù)obj輸入框的值匹配正則

label.textContent='輸入正確'

returntrue//只有進(jìn)入這里才能提交表單

//不在正則匹配之間省略else

label.textContent=tip

returnfalse//如果進(jìn)入這里了就中斷代碼不讓它運(yùn)行到下面去

//輸入框沒(méi)有內(nèi)容length0省略else

label.textContent='不能為空'

returnfalse//不能提交表單

//給myForm添加提交事件

//提交事件具備返回值

myForm.onsubmit=()={

varupwd1=document.getElementById('upwd').value

varpwd2=document.getElementById('pwd').value

//表單提交成功的情況

varf1=checkLable(uname,/^[a-zA-Z]{3,6}$/)

varf2=checkLable(upwd,/^\w{6,10}$/)

if(f1f2upwd1==pwd2){

//判斷密碼是否一致

alert('注冊(cè)成功,請(qǐng)登陸')

window.open('login.html')

alert('前后密碼不一致')

/script

/body

/html

主界面

主界面html、css和js

!DOCTYPEhtml

html

head

metacharset="utf-8"

title/title

styletype="text/css"

/*頁(yè)面整體(背景)*/

body{

background-color:#000000;

background-position:center;

background-size:cover;

padding:0;

margin:0;

/*按鈕樣式*/

.custom-btn{

width:130px;

height:40px;

color:#fff;

border-radius:5px;

padding:10px25px;

font-family:'Lato',sans-serif;

font-weight:500;

background:transparent;

cursor:pointer;

transition:all0.3sease;

position:relative;

display:inline-block;

box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);

outline:none;

.btn-8{

background-color:#f0ecfc;

background-image:linear-gradient(315deg,#f0ecfc0%,#c797eb74%);

line-height:42px;

padding:0;

border:none;

.btn-8span{

position:relative;

display:block;

width:100%;

height:100%;

.btn-8:before,

.btn-8:after{

position:absolute;

content:"";

right:0;

bottom:0;

background:#c797eb;

/*box-shadow:4px4px6px0rgba(255,255,255,.5),

-4px-4px6px0rgba(116,125,136,.2),

inset-4px-4px6px0rgba(255,255,255,.5),

inset4px4px6px0rgba(116,125,136,.3);*/

transition:all0.3sease;

.btn-8:before{

height:0%;

width:2px;

.btn-8:after{

width:0%;

height:2px;

.btn-8:hover:before{

height:100%;

.btn-8:hover:after{

width:100%;

.btn-8:hover{

background:transparent;

.btn-8span:hover{

color:#c797eb;

.btn-8span:before,

.btn-8span:after{

position:absolute;

content:"";

left:0;

top:0;

background:#c797eb;

/*box-shadow:4px4px6px0rgba(255,255,255,.5),

-4px-4px6px0rgba(116,125,136,.2),

inset-4px-4px6px0rgba(255,255,255,.5),

inset4px4px6px0rgba(116,125,136,.3);*/

transition:all0.3sease;

.btn-8span:before{

width:2px;

height:0%;

.btn-8span:after{

height:2px;

width:0%;

.btn-8span:hover:before{

height:100%;

.btn-8span:hover:after{

width:100%;

.btn-9{

border:none;

transition:all0.3sease;

overflow:hidden;

.btn-9:after{

position:absolute;

content:"";

z-index:-1;

top:0;

left:0;

width:100%;

height:100%;

background-color:#e70000;

background-image:linear-gradient(315deg,#26a2ef0%,#5500ff74%);

transition:all0.3sease;

.btn-9:hover{

background:transparent;

box-shadow:4px4px6px0rgba(255,255,255,.5),-4px-4px6px0rgba(116,125,136,.2),inset-4px-4px6px0rgba(255,255,255,.5),inset4px4px6px0rgba(116,125,136,.3);

color:#000000;

.btn-9:hover:after{

-webkit-transform:scale(2)rotate(180deg);

transform:scale(2)rotate(180deg);

box-shadow:4px4px6px0rgba(255,255,255,.5),-4px-4px6px0rgba(12,131,131,0.2),inset-4px-4px6px0rgba(18,165,165,0.5),inset4px4px6px0rgba(116,125,136,.3);

.btn-12{

position:relative;

right:20px;

bottom:20px;

border:none;

box-shadow:none;

width:130px;

height:40px;

line-height:42px;

-webkit-perspective:230px;

perspective:230px;

.btn-12span{

background:rgb(0,172,238);

background:linear-gradient(0deg,rgba(0,172,238,1)0%,rgba(2,126,251,1)100%);

display:block;

position:absolute;

width:130px;

height:40px;

box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);

border-radius:5px;

margin:0;

text-align:center;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

-webkit-transition:all.3s;

transition:all.3s;

.btn-12span:nth-child(1){

box-shadow:-7px-7px20px0px#fff9,-4px-4px5px0px#fff9,7px7px20px0px#0002,4px4px5px0px#0001;

-webkit-transform:rotateX(90deg);

-moz-transform:rotateX(90deg);

transform:rotateX(90deg);

-webkit-transform-origin:50%50%-20px;

-moz-transform-origin:50%50%-20px;

transform-origin:50%50%-20px;

.btn-12span:nth-child(2){

-webkit-transform:rotateX(0deg);

-moz-transform:rotateX(0deg);

transform:rotateX(0deg);

-webkit-transform-origin:50%50%-20px;

-moz-transform-origin:50%50%-20px;

transform-origin:50%50%-20px;

.btn-12:hoverspan:nth-child(1){

box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);

-webkit-transform:rotateX(0deg);

-moz-transform:rotateX(0deg);

transform:rotateX(0deg);

.btn-12:hoverspan:nth-child(2){

box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);

color:transparent;

-webkit-transform:rotateX(-90deg);

-moz-transform:rotateX(-90deg);

transform:rotateX(-90deg);

.btn-1{

background:rgb(6,14,131);

background:linear-gradient(0deg,rgba(6,14,131,1)0%,rgba(12,25,180,1)100%);

border:none;

.btn-1:hover{

background:rgb(0,3,255);

background:linear-gradient(0deg,rgba(0,3,255,1)0%,rgba(2,126,251,1)100%);

.btn-14{

background:rgb(255,151,0);

border:none;

z-index:1;

.btn-14:after{

position:absolute;

content:"";

width:100%;

height:0;

top:0;

left:0;

z-index:-1;

border-radius:5px;

background-color:#eaf818;

background-image:linear-gradient(315deg,#eaf8180%,#f6fc9c74%);

box-shadow:inset2px2px2px0pxrgba(255,255,255,.5);

7px7px20px0pxrgba(0,0,0,.1),

4px4px5px0pxrgba(0,0,0,.1);

transition:all0.3sease;

.btn-14:hover{

color:#000;

.btn-14:hover:after{

top:auto;

bottom:0;

height:100%;

.btn-14:active{

top:2px;

.btn-10{

background:rgb(22,9,240);

background:linear-gradient(0deg,rgba(22,9,240,1)0%,rgba(49,110,244,1)100%);

color:#fff;

border:none;

transition:all0.3sease;

overflow:hidden;

.btn-10:after{

position:absolute;

content:"";

top:0;

left:0;

z-index:-1;

width:100%;

height:100%;

transition:all0.3sease;

-webkit-transform:scale(.1);

transform:scale(.1);

.btn-10:hover{

color:#fff;

border:none;

background:transparent;

.btn-10:hover:after{

background:rgb(0,3,255);

background:linear-gradient(0deg,rgba(2,126,251,1)0%,rgba(0,3,255,1)100%);

-webkit-transform:scale(1);

transform:scale(1);

/*購(gòu)物卡選項(xiàng)*/

div::after{

opacity:0.5;

top:0;

left:0;

bottom:0;

right:0;

position:absolute;

z-index:-1;

/*商品展示表格優(yōu)化*/

table{

margin:10pxauto;

/*購(gòu)物車美化*/

#cartth,#carttd{

height:25px;

line-height:25px;

text-align:center;

border:1pxsolid#ffff7f;

#cartth{

background:rgba(255,255,127,0.6);

font-weight:normal;

#carttr{

background-color:rgba(255,255,255,0.6);

/*小圖*/

span{

display:block;

width:50px;

height:50px;

margin:20px40px;

/*價(jià)格*/

color:#DC143C;

font-weight:800;

margin:10pxauto;

/*購(gòu)物車主體*/

padding:10px;

background-color:rgba(255,255,255,0.8);

left:0;

right:0;

margin:0auto;

width:1200px;

height:100%;

/*購(gòu)物車背景*/

#ca{

display:block;

position:fixed;

width:100%;

/*top:500px;*/

bottom:10px;

right:0px;

transition:.5s;

background-color:rgba(255,255,255,0.6);

border-radius:10px;

/*購(gòu)物車表格*/

#cart{

width:100%;

height:200px;

background:rgba(255,255,255,0.4);

margin:10pxauto;

border-collapse:collapse;/*border-collapse:collapse合并內(nèi)外邊距(去除表格單元格默認(rèn)的2個(gè)像素內(nèi)外邊距*/

display:block;

width:1000px;

height:500px;

margin:10pxauto;

background-color:rgba(44,95,176,0.7);

border-radius:20px;

/*頂部導(dǎo)航欄*/

#tp{

width:100%;

height:100px;

display:block;

justify-content:center;

background-color:rgba(43,13,143,1.0);

border-radius:0020px20px;

margin:0;

spanimg{

width:50px;

height:50px;

border:solid2px#999973;

/*大圖類*/

.bimg{

width:500px;

height:350px;

/*讓購(gòu)物車內(nèi)容居中*/

text-align:center;

text-align:center;

margin-bottom:0px;

/*商品價(jià)格樣式*/

font-size:larger;

/*視頻背景*/

video{

margin:0;

padding:0;

position:fixed;

right:0px;

bottom:0px;

min-width:100%;

min-height:100%;

height:auto;

width:auto;

/*加濾鏡*/

/*filter:blur(15px);//背景模糊設(shè)置*/

/*-webkit-filter:grayscale(100%);*/

/*filter:grayscale(100%);//背景灰度設(shè)置*/

z-index:-11;

source{

margin:0;

padding:0;

min-width:100%;

min-height:100%;

height:auto;

width:auto;

ul{

list-style:none;

margin:0;

padding:0;

上語(yǔ)句意思：將ul列表的默認(rèn)樣式取消；

如果沒(méi)有此語(yǔ)句，則結(jié)果在導(dǎo)航欄中很可能有小黑點(diǎn)；

.box{

width:1280px;

height:80px;

margin:0auto;

padding:0;

上語(yǔ)句意思：給div盒子定義

寬度為960px;

高度為40px;

.boxul{

overflow:hidden;

上語(yǔ)句意思：給div盒子下的ul盒子來(lái)設(shè)置隱藏屬性；

隱藏屬性作用：清除子盒子可能產(chǎn)生的浮動(dòng)，以便按照要求設(shè)置導(dǎo)航欄為8個(gè)部分；

.boxulli{

width:160px;

height:80px;

float:left;

font-size:28px;

text-align:center;

font-family:"MicrosoftYahei";

line-height:40px;

margin:0;

padding:0;

上語(yǔ)句意思：設(shè)置div盒子的ul盒子的子盒子li的屬性值；

寬度為120px;

高度為40px;

浮動(dòng)值為靠左浮動(dòng)；

子號(hào)為18px;

文字對(duì)齊為居中；

文字類型為“微軟雅黑”

行高為40px;

.boxullia{

display:block;

background-color:#2c2c2c;

color:#666;

height:60px;

text-decoration:none;

margin:0;

padding:0;

上語(yǔ)句意思：設(shè)置div盒子的ul盒子的li盒子的子盒子li的屬性值；

"display:block;"：將行內(nèi)元素變成塊級(jí)元素；

設(shè)置背景顏色為"#ccc"；

字體顏色為"#666";

文本修飾為無(wú)；

.boxullia:hover{

background-color:#ccc;

color:#fff;

font-weight:bold;

上語(yǔ)句意思：設(shè)置div盒子的ul盒子的li盒子的子盒子li的屬性值；(設(shè)定當(dāng)鼠標(biāo)放在導(dǎo)航欄背景顏色變化值)

變化后的背景顏色為"yellowgreen"【黃綠色】；

變化后的字體顏色為"#fff"【白色】；

變化后的字體粗細(xì)為"bold"【加粗】；

/style

/head

body

div

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"主頁(yè)/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"推薦/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"史低/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"分類/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"搜索/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"我的/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"好友/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"設(shè)置/a/li

/ul

/div

videoid="v1"autoplayloopmuted

sourcesrc="img/艾爾登法環(huán).mp4"type="video/mp4"/

/video

!--游戲主面板id='d'--

divid="d"

!--艾爾登法環(huán)--

divid="g1"

h1艾爾登法環(huán)/h1

table

spanimgsrc="img/艾爾登法環(huán)03.jpg"/span

spanimgsrc="img/艾爾登法環(huán)02.jpg"/span

spanimgsrc="img/艾爾登法環(huán)01.jpg"/span

spanimgsrc="img/艾爾登法環(huán)04.jpg"/span

/td

tdcolspan="2"imgsrc="img/艾爾登法環(huán)03.jpg"/td

tdcolspan="1"

b故事背景/b

font故事發(fā)生在名為“交界地”的地方，這里的人們擁戴永恒女王瑪麗卡。也受到瑪麗卡所祝福。所有接受祝福的人瞳孔中都有黃金一般的光芒，但也有些人因?yàn)楦鞣N原因失去了祝福，眼中的光芒消逝。這些人就被稱為褪色者，并因此被逐出交界地。某天因?yàn)樽鳛樽８：诵牡姆ōh(huán)被擊碎，祝福受到污染的半神們?yōu)榱耸占ōh(huán)碎片發(fā)動(dòng)了一場(chǎng)又一場(chǎng)的戰(zhàn)爭(zhēng)，導(dǎo)致世界變的滿目瘡痍，褪色者們因?yàn)榉ōh(huán)破碎恢復(fù)了祝福，收集艾爾登法環(huán)碎片，挑戰(zhàn)半神，而玩家們扮演的角色便是褪色者。/font/td

/tr

td/td

tda價(jià)格:$/aa399/a

buttontype="button"添加購(gòu)物車/button

/td

/tr

/table

/div

!--戰(zhàn)神--

divid=""

h1戰(zhàn)神4/h1

table

spanimgsrc="img/戰(zhàn)神403.jpg"/span

spanimgsrc="img/戰(zhàn)神401.jpg"/span

spanimgsrc="img/戰(zhàn)神402.jpg"/span

spanimgsrc="img/戰(zhàn)神404.jpg"/span

/td

tdcolspan="2"imgsrc="img/戰(zhàn)神403.jpg"/td

tdcolspan="1"

b故事背景/b

font很久以前，因?yàn)橄ＥD神話中的戰(zhàn)神阿瑞斯的策略，克雷多斯失去了最愛(ài)的家人。憤怒的克雷多斯開(kāi)始向希臘的眾神挑戰(zhàn)，并且成功復(fù)仇。之后克雷多斯拋下了凄慘的過(guò)去，來(lái)到了北歐并且獲得了新的家庭。因?yàn)橛兄狙倪^(guò)去，所以克雷多斯一直和自己的兒子保持著一段距離。但是，因?yàn)槠拮拥耐蝗凰劳觯死锥嗨乖俅螐?fù)出，為了完成妻子的遺言，他踏上了前往由北歐神話的諸神掌管的米茲伽爾茲之地的旅途。/font/td

/tr

td/td

tda價(jià)格:$/aa345/a

buttontype="button"添加購(gòu)物車/button

/td

/tr

/table

/div

!--塞爾達(dá)--

divid=""

h1塞爾達(dá)傳說(shuō).曠野之息/h1

table

spanimgsrc="img/塞爾達(dá)04.jpg"/span

spanimgsrc="img/塞爾達(dá)03.jpg"/span

spanimgsrc="img/塞爾達(dá)02.jpg"/span

spanimgsrc="img/塞爾達(dá)01.jpg"/span

/td

tdcolspan="2"imgsrc="img/塞爾達(dá)04.jpg"/td

tdcolspan="1"

b故事背景/b

font該作故事發(fā)生在海拉魯王國(guó)滅亡的一百年后，玩家扮演的林克在地下遺跡蘇醒，但卻失去了一切記憶，耳邊時(shí)而響起既熟悉又陌生的聲音，指引著林克開(kāi)始了新的冒險(xiǎn)之旅。林克只得在冒險(xiǎn)中重拾記憶并最終去完成屬于自己一百年前的使命。/font

/tr

td/td

tda價(jià)格:$/aa275/a

buttontype="button"添加購(gòu)物車/button

/td

/tr

/table

/div

!--空洞騎士--

divid=""

h1空洞騎士/h1

table

spanimgsrc="img/空洞騎士.jpg"/span

spanimgsrc="img/空洞騎士01.jpg"/span

spanimgsrc="img/空洞騎士04.jpg"/span

spanimgsrc="img/空洞騎士03.jpeg"/span

/td

tdcolspan="2"imgsrc="img/空洞騎士01.jpg"/td

tdcolspan="1"

b故事背景/b

font在一個(gè)錯(cuò)綜復(fù)雜的地下城“空洞巢穴”，我們的英雄在這個(gè)地下王國(guó)內(nèi)開(kāi)始了他的歷險(xiǎn)，他需要利用自己的能力探索遺跡、消滅怪物或者和一些怪物做朋友來(lái)幫助自己。游戲強(qiáng)調(diào)操作技巧和探索發(fā)現(xiàn)，擁有一定的難度。/font/td

/tr

td/td

tda價(jià)格:$/aa79/a

buttontype="button"添加購(gòu)物車/button

/td

/tr

/table

/div

!--幽靈線.東京--

divid=""

h1幽靈線.東京/h1

table

spanimgsrc="img/幽靈線.東京01.jpg"/span

spanimgsrc="img/幽靈線.東京02.jpg"/span

spanimgsrc="img/幽靈線.東京04.jpg"/span

spanimgsrc="img/幽靈線.東京03.jpg"/span

/td

tdcolspan="2"imgsrc="img/幽靈線.東京01.jpg"/td

tdcolspan="1"

b故事背景/b

font在一位險(xiǎn)惡神秘學(xué)者的操縱下，致命的超自然之力入侵東京，令東京的人口瞬間消失。與強(qiáng)大靈體結(jié)成同盟，在他們的?復(fù)仇之路?上助一臂之力，掌握各類強(qiáng)力技能，解開(kāi)消失事件背后的黑暗真相。探索為超自然之力所扭曲的不一樣的東京。從超摩登城市景觀，到黑暗的幽深巷道和古老雅致的寺院，穿行于別樣的美感之間，發(fā)現(xiàn)城市中橫行的妖怪——徘徊在街巷間的復(fù)仇之靈?？缮?jí)的元素能力，和鬼靈追獵技能融會(huì)貫通，與超自然威脅對(duì)峙。憑借空靈之力，飛越東京天際線，翱翔街巷之間，發(fā)現(xiàn)新的任務(wù)，甚至可以先發(fā)制敵。/font/td

/tr

td/td

tda價(jià)格:$/aa499/a

buttontype="button"添加購(gòu)物車/button

/td

/tr

/table

/div

!--哈利波特.霍格沃茲遺產(chǎn)--

divid=""

h1哈利波特.霍格沃茲遺產(chǎn)/h1

table

spanimgsrc="img/哈利波特.霍格沃茲遺產(chǎn)01.jpg"/span

spanimgsrc="img/哈利波特.霍格沃茲遺產(chǎn)02.jpg"/span

spanimgsrc="img/哈利波特.霍格沃茲遺產(chǎn)04.jpg"/span

spanimgsrc="img/哈利波特.霍格沃茲遺產(chǎn)03.jpg"/span

/td

tdcolspan="2"imgsrc="img/哈利波特.霍格沃茲遺產(chǎn)01.jpg"/td

tdcolspan="1"

b故事背景/b

font游戲故事時(shí)間設(shè)定在了19世紀(jì)，玩家將扮演一名霍格沃茲魔法學(xué)校的學(xué)生，更重要的是玩家身上掌管著一枚揭開(kāi)上古秘密的鑰匙，而這個(gè)秘密足以威脅到整個(gè)巫師世界的安危。游戲開(kāi)發(fā)組成員AvalancheSoftware表示本次作品的時(shí)間線在紐特·斯卡曼德、伏地魔等人出現(xiàn)之前。/font/td

/tr

td/td

tda價(jià)格:$/aa299/a

buttontype="button"添加購(gòu)物車/button

/td

/tr

/table

/div

!--師傅--

divid=""

h1師傅/h1

table

spanimgsrc="img/師傅01.jpg"/span

spanimgsrc="img/師傅02.jpg"/span

spanimgsrc="img/師傅03.jpg"/span

spanimgsrc="img/師傅04.jpg"/span

/td

tdcolspan="2"imgsrc="img/師傅01.jpg"/td

tdcolspan="1"

b故事背景/b

font玩家將在現(xiàn)代都市環(huán)境中進(jìn)行的肉搏戰(zhàn)，跟隨一名年輕的功夫?qū)W生走上復(fù)仇之路，尋找殺害他家人的兇手。一對(duì)一，他沒(méi)有盟友，卻有無(wú)數(shù)的敵人。他將不得不依靠他對(duì)功夫的獨(dú)特掌握來(lái)保衛(wèi)他家族的遺產(chǎn)。為了克服看似無(wú)法克服的困難，玩家必須精通功夫，并且依靠一枚神奇的秘術(shù)吊墜，可以起死回生。不過(guò)秘術(shù)的代價(jià)很高，每復(fù)活一次，玩家的年齡就會(huì)急速增加。/font/td

/tr

td/td

tda價(jià)格:$/aa129/a

buttontype="button"添加購(gòu)物車/button

/td

/tr

/table

/div

/div

!--購(gòu)物車--

divid="ca"

divid="d2"

buttontype="button"關(guān)閉購(gòu)物車/button

/div

divid="ff"align="center"

!--購(gòu)物車--

tableborder=""cellspacing=""cellpadding=""id="cart"

thinputtype="checkbox"name="all"id="allc"http://th

th商品名稱/th

th商品單價(jià)/th

th刪除商品/th

/tr

/table

/div

div

buttontype="button"結(jié)算購(gòu)物車/button

/div

/div

scripttype="text/javascript"

//最小化購(gòu)物車

functionChangeCart(btn){

varacart=btn.parentElement.parentElement

varcarts=acart.getElementsByClassName('cart')

for(letcofcarts){

if(c.style.display=='none'){

c.style.display='block'

ff.style.display='block'

ca.style.backgroundColor='rgba(255,255,255,0.5)'

btn.textContent="關(guān)閉購(gòu)物車"

}else{

c.style.display='none'

ff.style.display='none'

ca.style.backgroundColor='rgba(0,0,0,0)'

btn.textContent="打開(kāi)購(gòu)物車"

//購(gòu)物車跟隨滾動(dòng)條移動(dòng)

//window.onscroll=()={

//ca.style.top=500+document.documentElement.scrollTop+"px"

//}

//鼠標(biāo)移入動(dòng)物小圖,大圖跟隨改變

functionChangeBig(){

varspans=document.getElementsByTagName('span')

for(letsofspans){

s.onmouseenter=()={

vartr=s.parentElement.parentElement

varimg=tr.firstElementChild.nextElementSibling.firstElementChild

img.src=s.firstChild.src

s.firstChild.style.border='solid2pxblack'

s.onmouseout=()={

s.firstChild.style.border='solid2px#999973'

functionenterGame(){

vargame=document.getElementsByClassName('s')

for(letgofgame){

g.on