當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

js实现模拟购物商城的方法(模拟购物流程)

發布時間：2023/12/19 综合教程 29 生活家

生活随笔收集整理的這篇文章主要介紹了 js实现模拟购物商城的方法(模拟购物流程) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這篇文章主要介紹了js實現模擬購物商城的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

準備階段：

準備一些需要放到頁面上的圖片，小圖和其對應的大圖，博主這邊舉例為小圖(40 x 40),大圖(321 x 430)。

結構分析：

大圖區域
小圖區域
整體邊框區域

效果分析：

鼠標放在小圖片上大圖會對應顯示。
鼠標放在小圖片上面會有對應效果。
鼠標移出時小邊框對應效果消失。

使用css對邊框進行設置：

對div標簽進行設置（對邊框屬性進行設置）：

#showdiv{
width:342px;
height:505px;
border:solid1px;
border-radius:10px;
}

對table標簽進行設置（不需要邊框，且離頂部有一定的距離）：

#ta{
margin:auto;
margin-top:5px;
}

使用js對頁面動態效果進行設置：

鼠標進入的函數：

functionoperInImg(img,src){
//設置圖片的樣式
img.style.border="solid1pxblue";
//設置大圖的img路徑
//獲取大圖路徑
varbig=document.getElementById("big");
//設置路徑
big.src=src;
}
functionoperOutImg(img){
//設置圖片的樣式
img.style.border="";
}

鼠標移出函數：

functionoperOutImg(img){
//設置圖片的樣式
img.style.border="";
}

整體代碼實現：

<!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>
//創建函數進行照片的聯動和樣式設置
functionoperInImg(img,src){
//設置圖片的樣式
img.style.border="solid1pxblue";
//設置大圖的img路徑
//獲取大圖路徑
varbig=document.getElementById("big");
//設置路徑
big.src=src;
}
functionoperOutImg(img){
//設置圖片的樣式
img.style.border="";
}


</script>

<!---聲明css代碼域-->
<style>
/*設置div樣式*/
#showdiv{
width:342px;
height:505px;
border:solid1px;
border-radius:10px;
}
/*設置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>

實現效果：

javascript是一種什么語言

javascript是一種動態類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發的腳本語言，同時也是一種廣泛用于客戶端Web開發的腳本語言。它主要用來給HTML網頁添加動態功能，現在JavaScript也可被用于網絡服務器，如Node.js。

總結

以上是生活随笔為你收集整理的js实现模拟购物商城的方法(模拟购物流程)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。