jQuery購物網(wǎng)頁經(jīng)典制作案例
本文實(shí)例為大家分享了jQuery購物網(wǎng)頁經(jīng)典案例,供大家參考,具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今日?qǐng)F(tuán)購模塊</title>
<style type="text/css" rel="stylesheet">
*{
margin:0px ;
padding:0px;
font-size: 12px ;
}
#pruduce{
width:948px ;
background-color: darkgray;
}
.top{
height:56px ;
background: url("images/top.jpg") no-repeat 10px 10px ;
}
.main{
text-align: center;
height:308px ;
}
.box{
width: 300px;
height:280px;
border:1px solid red;
margin:0px 6px ;
float: left;
cursor:pointer;
}
dl{
padding-top: 3px ;
}
dd{
line-height: 30px ;
}
div.btprice_1{
height:50px ;
background: yellow url("images/bt1.jpg")no-repeat 5px 4px ;
}
div.btprice_2{
height:50px ;
background: yellow url("images/bt2.jpg")no-repeat 5px 4px ;
}
div.btprice_3{
height:50px ;
background: yellow url("images/bt3.jpg")no-repeat 5px 4px ;
}
.hoverstyle{
background-color: darkblue;
color: white;
}
</style>
<script type="text/javascript " src="js/jquery-1.8.3.js"></script>
<script language="JavaScript">
$(document).ready(function () {
$(".box dl").mouseover(function () {
$(this).addClass('hoverstyle');
});
$(".box dl").mouseout(function () {
$(this).removeClass('hoverstyle');
});
});
</script>
</head>
<body>
<div id="pruduce">
<div class="top"></div>
<div class="main">
<div class="box">
<dl>
<dt><img src="images/pic1.jpg" alt=""></dt>
<dd>[包郵]亮點(diǎn)可移動(dòng)兒童防身高帖(每個(gè)ID限20)</dd>
</dl>
<div class="btprice_1"></div>
</div>
<div class="box">
<dl>
<dt><img src="images/pic2.jpg" alt=""></dt>
<dd>[包郵]韓國(guó)泡溫泉游泳衣價(jià)達(dá)瑪分教保守纖瘦大胸泳裝</dd>
</dl>
<div class="btprice_2"></div>
</div>
<div class="box">
<dl>
<dt><img src="images/pic3.jpg" alt=""></dt>
<dd>[包郵]貴人鳥運(yùn)動(dòng)透氣跑鞋P23423(每個(gè)限購5件)</dd>
</dl>
<div class="btprice_3"></div>
</div>
</div>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery實(shí)現(xiàn)購物車多物品數(shù)量的加減+總價(jià)計(jì)算
- 基于JQuery實(shí)現(xiàn)的類似購物商城的購物車
- jQuery實(shí)現(xiàn)加入購物車飛入動(dòng)畫效果
- JQuery實(shí)現(xiàn)的購物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
- jQuery實(shí)現(xiàn)購物車數(shù)字加減效果
- jQuery實(shí)現(xiàn)類似淘寶購物車全選狀態(tài)示例
- 純jquery實(shí)現(xiàn)模仿淘寶購物車結(jié)算
- jQuery實(shí)現(xiàn)購物車計(jì)算價(jià)格功能的方法
- jQuery+HTML5加入購物車代碼分享
- Jquery 快速構(gòu)建可拖曳的購物車DragDrop
相關(guān)文章
jquery實(shí)現(xiàn)企業(yè)定位式導(dǎo)航效果
這篇文章主要介紹了jquery實(shí)現(xiàn)企業(yè)定位式導(dǎo)航效果2018-01-01
jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條
jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條,使用jQuery EasyUI的朋友可以參考下。2011-09-09
Eclipse引入jquery報(bào)錯(cuò)如何解決
有朋友問我,在是使用eclipse的過程中遇到了這么一個(gè)問題--eclipse導(dǎo)入jquery包后報(bào)錯(cuò)——究竟是什么原因?qū)е逻@一問題發(fā)生的呢?該如何解決此問題呢?下面小編給大家?guī)砹私鉀Q辦法,不妨一起看看吧2015-12-12
jQuery中調(diào)用WebService方法小結(jié)
以前在寫ajax請(qǐng)求時(shí),總是喜歡使用jQuery+ashx的方式進(jìn)行調(diào)用,今天采取jQuery+WebService的方法來做ajax請(qǐng)求,發(fā)現(xiàn)這種方式比使用ashx的方式要更方便。2011-03-03
jquery.artwl.thickbox.js 一個(gè)非常簡(jiǎn)單好用的jQuery彈出層插件
jquery.artwl.thickbox.js 一個(gè)非常簡(jiǎn)單好用的jQuery彈出層插件,需要的朋友可以參考下2012-03-03
jquery.validate 自定義驗(yàn)證方法及validate相關(guān)參數(shù)
jquery.validate是一個(gè)基于jquery的非常優(yōu)秀的驗(yàn)證框架,我們可以通過它迅速驗(yàn)證一些常見的輸入,并且可以自己擴(kuò)充自己的驗(yàn)證方法,而且對(duì)國(guó)際化也有非常好的支持,通過本文給大家介紹jquery.validate 自定義驗(yàn)證方法及validate相關(guān)參數(shù),需要的朋友一起學(xué)習(xí)吧2016-01-01

