js實(shí)現(xiàn)模擬購物商城案例
學(xué)習(xí)HTML，css和js前端的小伙伴們，這次來分享購物商城案例的實(shí)現(xiàn)！
準(zhǔn)備階段：準(zhǔn)備一些需要放到頁面上的圖片，小圖和其對應(yīng)的大圖，博主這邊舉例為小圖(40 x 40),大圖(321 x 430)。
結(jié)構(gòu)分析： 大圖區(qū)域 小圖區(qū)域 整體邊框區(qū)域 效果分析： 鼠標(biāo)放在小圖片上大圖會(huì)對應(yīng)顯示。 鼠標(biāo)放在小圖片上面會(huì)有對應(yīng)效果。 鼠標(biāo)移出時(shí)小邊框?qū)?yīng)效果消失。 使用css對邊框進(jìn)行設(shè)置：對div標(biāo)簽進(jìn)行設(shè)置（對邊框?qū)傩赃M(jìn)行設(shè)置）：
#showdiv{ width: 342px; height: 505px; border: solid 1px ; border-radius: 10px; }
對table標(biāo)簽進(jìn)行設(shè)置（不需要邊框，且離頂部有一定的距離）：
#ta{ margin: auto; margin-top: 5px; }使用js對頁面動(dòng)態(tài)效果進(jìn)行設(shè)置：
鼠標(biāo)進(jìn)入的函數(shù)：
function operInImg(img,src){ //設(shè)置圖片的樣式 img.style.border='solid 1px blue'; //設(shè)置大圖的img路徑 //獲取大圖路徑 var big = document.getElementById('big'); //設(shè)置路徑 big.src=src; } function operOutImg(img){ //設(shè)置圖片的樣式 img.style.border=''; }
鼠標(biāo)移出函數(shù)：
function operOutImg(img){ //設(shè)置圖片的樣式 img.style.border=''; }整體代碼實(shí)現(xiàn)：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <!--聲明js代碼域--> <script>//創(chuàng)建函數(shù)進(jìn)行照片的聯(lián)動(dòng)和樣式設(shè)置function operInImg(img,src){ //設(shè)置圖片的樣式 img.style.border='solid 1px blue'; //設(shè)置大圖的img路徑//獲取大圖路徑var big = document.getElementById('big');//設(shè)置路徑big.src=src; }function operOutImg(img){ //設(shè)置圖片的樣式 img.style.border='';} </script> <!---聲明css代碼域--> <style>/*設(shè)置div樣式*/#showdiv{ width: 342px; height: 505px; border: solid 1px ; border-radius: 10px;}/*設(shè)置table樣式*/#ta{ margin: auto; margin-top: 5px;} </style> <title>taobao</title></head><body> <div id='showdiv'> <table id='ta'> <tr height='300px'> <td colspan='5'><img src='http://www.b3g6.com/bcjs/images/demo-big.jpg' alt='' id='big'></td> </tr> <tr height='40px'> <td><img src='http://www.b3g6.com/bcjs/images/demo01.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big01.jpg’)' onmouseout='operOutImg(this)'></td> <td><img src='http://www.b3g6.com/bcjs/images/demo02.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big02.jpg’)' onmouseout='operOutImg(this)'> </td> <td><img src='http://www.b3g6.com/bcjs/images/demo03.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big03.jpg’)' onmouseout='operOutImg(this)'> </td> <td><img src='http://www.b3g6.com/bcjs/images/demo04.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big04.jpg’)' onmouseout='operOutImg(this)'> </td> <td><img src='http://www.b3g6.com/bcjs/images/demo05.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big05.jpg’)' onmouseout='operOutImg(this)'> </td> </tr> </table> </div></body></html>
實(shí)現(xiàn)效果：
感謝您的閱讀，不足之處歡迎指正！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. idea刪除項(xiàng)目的操作方法2. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程3. IntelliJ IDEA恢復(fù)刪除文件的方法4. IntelliJ IDEA導(dǎo)入jar包的方法5. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法6. Docker 部署 Prometheus的安裝詳細(xì)教程7. IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法8. idea重置默認(rèn)配置的方法步驟9. idea導(dǎo)入maven項(xiàng)目的方法10. IntelliJ IDEA調(diào)整字體大小的方法
網(wǎng)公網(wǎng)安備