js实现模拟购物商城的方法(模拟购物流程)
生活随笔
收集整理的這篇文章主要介紹了
js实现模拟购物商城的方法(模拟购物流程)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這篇文章主要介紹了js實現(xiàn)模擬購物商城的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
準備階段：
準備一些需要放到頁面上的圖片，小圖和其對應的大圖，博主這邊舉例為小圖(40 x 40),大圖(321 x 430)。
結(jié)構(gòu)分析：
-
大圖區(qū)域
-
小圖區(qū)域
-
整體邊框區(qū)域
效果分析：
-
鼠標放在小圖片上大圖會對應顯示。
-
鼠標放在小圖片上面會有對應效果。
-
鼠標移出時小邊框?qū)ЧА?/p>
使用css對邊框進行設(shè)置：
對div標簽進行設(shè)置（對邊框?qū)傩赃M行設(shè)置）：
#showdiv{
width:342px;
height:505px;
border:solid1px;
border-radius:10px;
}
對table標簽進行設(shè)置（不需要邊框，且離頂部有一定的距離）：
#ta{
margin:auto;
margin-top:5px;
}
使用js對頁面動態(tài)效果進行設(shè)置：
鼠標進入的函數(shù)：
functionoperInImg(img,src){
//設(shè)置圖片的樣式
img.style.border="solid1pxblue";
//設(shè)置大圖的img路徑
//獲取大圖路徑
varbig=document.getElementById("big");
//設(shè)置路徑
big.src=src;
}
functionoperOutImg(img){
//設(shè)置圖片的樣式
img.style.border="";
}
鼠標移出函數(shù)：
functionoperOutImg(img){
//設(shè)置圖片的樣式
img.style.border="";
}
整體代碼實現(xiàn)：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!--聲明js代碼域-->
<script>
//創(chuàng)建函數(shù)進行照片的聯(lián)動和樣式設(shè)置
functionoperInImg(img,src){
//設(shè)置圖片的樣式
img.style.border="solid1pxblue";
//設(shè)置大圖的img路徑
//獲取大圖路徑
varbig=document.getElementById("big");
//設(shè)置路徑
big.src=src;
}
functionoperOutImg(img){
//設(shè)置圖片的樣式
img.style.border="";
}
</script>
<!---聲明css代碼域-->
<style>
/*設(shè)置div樣式*/
#showdiv{
width:342px;
height:505px;
border:solid1px;
border-radius:10px;
}
/*設(shè)置table樣式*/
#ta{
margin:auto;
margin-top:5px;
}
</style>
<title>taobao</title>
</head>
<body>
<divid="showdiv">
<tablewidth="332px"height="440px"id="ta">
<trheight="300px">
<tdcolspan="5"><imgsrc="./images/demo-big.jpg"alt=""id="big"></td>
</tr>
<trheight="40px">
<td><imgsrc="./images/demo01.jpg"alt=""onmouseover="operInImg(this,'./images/demo-big01.jpg')"onmouseout="operOutImg(this)"></td>
<td><imgsrc="./images/demo02.jpg"alt=""onmouseover="operInImg(this,'./images/demo-big02.jpg')"onmouseout="operOutImg(this)"></td>
<td><imgsrc="./images/demo03.jpg"alt=""onmouseover="operInImg(this,'./images/demo-big03.jpg')"onmouseout="operOutImg(this)"></td>
<td><imgsrc="./images/demo04.jpg"alt=""onmouseover="operInImg(this,'./images/demo-big04.jpg')"onmouseout="operOutImg(this)"></td>
<td><imgsrc="./images/demo05.jpg"alt=""onmouseover="operInImg(this,'./images/demo-big05.jpg')"onmouseout="operOutImg(this)"></td>
</tr>
</table>
</div>
</body>
</html>
實現(xiàn)效果：
javascript是一種什么語言
javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡服務器，如Node.js。
總結(jié)
以上是生活随笔為你收集整理的js实现模拟购物商城的方法(模拟购物流程)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： go语言的特别之处
- 下一篇： QToolButton设置图标位置