js實現(xiàn)模擬購物商城案例
學(xué)習(xí)HTML,css和js前端的小伙伴們,這次來分享購物商城案例的實現(xiàn)!
準(zhǔn)備階段:
準(zhǔn)備一些需要放到頁面上的圖片,小圖和其對應(yīng)的大圖,博主這邊舉例為小圖(40 x 40),大圖(321 x 430)。
結(jié)構(gòu)分析:
- 大圖區(qū)域
- 小圖區(qū)域
- 整體邊框區(qū)域
效果分析:
- 鼠標(biāo)放在小圖片上大圖會對應(yīng)顯示。
- 鼠標(biāo)放在小圖片上面會有對應(yīng)效果。
- 鼠標(biāo)移出時小邊框?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對頁面動態(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=""; }
整體代碼實現(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)動和樣式設(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 width ="332px" height = "440px" id="ta"> <tr height="300px"> <td colspan="5"><img src="./images/demo-big.jpg" alt="" id="big"></td> </tr> <tr height="40px"> <td><img src="./images/demo01.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big01.jpg')" onmouseout="operOutImg(this)"></td> <td><img src="./images/demo02.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big02.jpg')" onmouseout="operOutImg(this)"> </td> <td><img src="./images/demo03.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big03.jpg')" onmouseout="operOutImg(this)"> </td> <td><img src="./images/demo04.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big04.jpg')" onmouseout="operOutImg(this)"> </td> <td><img src="./images/demo05.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big05.jpg')" onmouseout="operOutImg(this)"> </td> </tr> </table> </div> </body> </html>
實現(xiàn)效果:
感謝您的閱讀,不足之處歡迎指正!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序購物商城系統(tǒng)開發(fā)系列-工具篇的介紹
這篇文章主要介紹了微信小程序購物商城系統(tǒng)開發(fā)系列-工具篇的介紹,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2016-11-11javascript實現(xiàn)劃詞標(biāo)記劃詞搜索功能修正版
javascript實現(xiàn)劃詞標(biāo)記劃詞搜索功能修正版...2006-12-12JavaScript中for循環(huán)的幾種寫法與效率總結(jié)
每個接觸JS的開發(fā)人員都不可避免的與for循環(huán)打交道,畢竟這是遍歷必不可少的工具之一。然而當(dāng)循環(huán)次數(shù)比較大時,效率問題必須重視。下面這篇文章就主要介紹了JavaScript中幾種for循環(huán)的寫法與效率,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02JavaScript原生編寫《飛機大戰(zhàn)坦克》游戲完整實例
飛機大戰(zhàn)坦克是一款小游戲,相信很多朋友都有玩過,由于最近在深入學(xué)習(xí)Javascript,所以想著用利用Javascript來實現(xiàn)這個游戲,下面這篇文章主要介紹了如何利用JavaScript原生編寫《飛機大戰(zhàn)坦克》游戲,需要的朋友可以參考下2017-01-01Echarts中的clear()和dispose()用法實例
這篇文章主要給大家介紹了關(guān)于Echarts中clear()和dispose()用法的相關(guān)資料,clear和dispose是echarts提供的用于解決內(nèi)存溢出的方法 ,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10網(wǎng)上應(yīng)用的一個不錯common.js腳本
網(wǎng)上應(yīng)用的一個不錯common.js腳本...2007-08-08使用uniapp打包微信小程序時主包和vendor.js過大解決(uniCloud的插件分包)
每個使用分包小程序必定含有一個主包,所謂的主包,即放置默認(rèn)啟動頁面/TabBar頁面,以及一些所有分包都需用到公共資源/JS 腳本,下面這篇文章主要給大家介紹了關(guān)于使用uniapp打包微信小程序時主包和vendor.js過大解決的相關(guān)資料,,需要的朋友可以參考下2023-02-02