<!DOCTYPE html>
<html>
<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">
<title>detail</title>
<link rel="stylesheet" href="detail.css">
<link rel="stylesheet" type="text/css" href="jxfzoomy.css"/>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script src="jxfzoomy.js" type="text/javascript" charset="utf-8"></script>
<script>
//页面加载完毕后执行
$(document).ready(function() {
$("#kg span").click(function() {
$(this).siblings().removeClass("border").addClass("bor")
$(this).toggleClass("border")
})
$('#container').jxfZoomy({
smallBoxW: 380, //小图框的宽 单位px 默认250px
smallBoxH: 250, //小图框的高 单位px 默认250px
bigBoxW: 250, //大图放大镜框的宽 单位px 默认350px
bigBoxH: 250, //大图放大镜框的高 单位px 默认350px
smallListImgW: 70, //缩略图的宽 单位px 默认50px
smallListImgH: 50, //缩略图的高 单位px 默认50px
moveSpeed: 80 //缩略图点击左右方向键移动的速度 单位px 默认50px
});
});
</script>
</head>
<body>
<iframe src="header.html" frameborder="0" width="100%" scrolling="no"></iframe>
<hr />
<!-- main 网页主体 -->
<div id="main">
<!-- 左侧图片 -->
<div id="container" class='jxfzoomy-container'>
<!-- 左侧商品预览 -->
<div class="jxfzoomy-thumb-box">
<div class="jxfzoomy-thumb-ct">
<ul class='jxfzoomy-list-img jxfzoomy-clearfix'>
<!-- 有jxfzoomy-active为当前选中的图片 data-smallImg属性为小图路径
data-bigImg属性为大图路径 <li>标签内部的img为缩略图 -->
<li class='jxfzoomy-active' data-smallImg="img/cake1_s1.jpg" data-bigImg="img/cake1_big.jpg">
<div ><img src="img/cake1_s1.jpg" alt=""></div>
</li>
<li data-smallImg="img/cake1_s2.jpg" data-bigImg="img/cake1_s2.jpg">
<div><img src="img/cake1_s2.jpg" alt=""></div>
</li>
<li data-smallImg="img/cake1_s3.jpg" data-bigImg="img/cake1_s3.jpg">
<div><img src="img/cake1_s3.jpg" alt=""></div>
</li>
<li data-smallImg="img/cake1_s4.jpg" data-bigImg="img/cake1_s4.jpg">
<div><img src="img/cake1_s4.jpg" alt=""></div>
</li>
</ul>
</div>
</div>
</div>
<!-- 右侧详情 -->
<div id="main_right">
<h2>提拉米苏(约2磅)</h2>
<div id="tab_top1">
<table cellspacing="0" cellpadding="0">
<tr >
<td class="light"style="width: 80px;">售 价</td>
<td style="width: 500px;">
<strong>￥198</strong>
<span>市场价</span>
<del>￥338</del>
<a href="#">已售<span>6264</span>件</a>
</td>
</tr>
</table>
</div>
<div id="tab_top2">
<table>
<tr>
<td class="light">材 料</td>
<td>鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</td>
</tr>
<tr>
<td class="light">包 装</td>
<td>一次性蛋糕用具1套</td>
</tr>
<tr>
<td class="light">备 注</td>
<td>品牌：悦轩饼家</td>
</tr>
</table>
</div>
<table>
<tbody>
<tr>
<td class="light">配送说明</td>
<td></td>
</tr>
<tr>
<td colspan="2" class="delivery">北京、上海、广州、深圳、天津、武汉、南阳</td>
<td></td>
</tr>
<tr>
<td class="light">配送至</td>
<td></td>
</tr>
<tr>
<td colspan="2" class="delivery">武汉</td>
<td></td>
</tr>
<tr>
<td class="light">说 明</td>
<td></td>
</tr>
<tr>
<td colspan="2" class="delivery">武汉联投青年城暂时不配送</td>
<td></td>
</tr>
<tr>
<td class="light">选 择</td>
<td></td>
</tr>
<tr>
<td colspan="2" id="kg">
<span class="bor">2磅</span>
<span class="bor">3磅</span>
<span class="bor">4磅</span>
</td>
<td></td>
</tr>
<tr>
<td colspan="2" id="buttons">
<a href="#">加入购物车</a>
<a href="#">立即购买</a>
</td>
<td></td>
</tr>
</tbody>
</table>
<div>
<div>
</div>
</div>
</div>
</div>
<iframe src="footer.html" frameborder="0" width="100%" scrolling="no"></iframe>
</body>
</html>
web前端：悦轩饼家项目【涵盖前端布局、js轮播图以及指示器左右箭头、购物车数量加减操作及后续价格计算】
需积分: 15 85 浏览量
2022-12-27
19:15:56
上传
评论 1
收藏 8.46MB ZIP 举报
悦轩饼家.zip （64个子文件） 
悦轩饼家 
08立即购买.css 700B
10登录页面.html 1KB jxfzoomy.css 3KB 关于我们.css 280B jquery-3.6.0.js 282KB footer.css 579B header.html 1KB 07购物车.html 4KB 04首页.html 3KB 06商品详情.html 6KB 09关于我们.html 2KB img 
cake5.jpg 31KB
icon.gif 7KB
ico_heart_d.png 15KB icon-address.png 324B cake1.jpg 35KB ico_cart_d.png 15KB bg_login.jpg 6.36MB about1.jpg 31KB i-search.jpg 17KB cake1_s3.jpg 87KB arrow_05.jpg 1KB cake1_s4.jpg 77KB ico_unchecked.png 604B tel_03.jpg 1KB box.png 8KB arrowr.png 1012B ico_checkout.png 682B i-cart.jpg 17KB cake_03.jpg 15KB bg1.jpg 299KB cake_05.jpg 18KB ca-afternoontea.png 27KB arrowl.png 963B ca-freehand.png 31KB bg.jpg 54KB cake2.jpg 35KB about2.jpg 395KB i-user.jpg 17KB look.gif 673B cake1_big.jpg 97KB bg3.jpg 259KB cake_07.jpg 14KB cake3.jpg 41KB cake1_s2.jpg 96KB cake4.jpg 39KB move-box.png 935B bg2.jpg 213KB arrow_03.jpg 1KB ca-cake.png 53KB cake1_s1.jpg 97KB common_z.png 22KB logo_big01.png 20KB list.css 1KB header.css 942B 08立即购买.html 4KB detail.css 1KB 登陆页面.css 673B jxfzoomy.js 12KB 05商品列表list.html 4KB .project 667B footer.html 1KB index.css 1KB 07购物车.css 1KB资源评论
前端嘻嘻哥
- 粉丝: 17
- 资源: 4
最新资源
- yolo目标检测项目实验
- downloadFile-1.hc
- Centos7.9环境下离线安装开源版Nginx（亲测版）
- C++课程设计：基于Qt的航班信息管理系统
- ADS7822UVerilog驱动，前面传的有点问题
- 基于python的高性能爬虫程序，使用了多线程+缓存+xpath实现的，这里以彼-岸图库为例，实现，仅用于学习交流
- 中分辨率成像光谱仪（MODIS）烧毁面积产品信息MODIS-C6-BA-User-Guide-1.2.pdf
- Screenshot_20240427_172613_com.huawei.browser.jpg
- 关于学习Python的相关资源网站链接及相关介绍.docx
- （HAL库）基于STM32F103C8T6的温控PID系统[Dht11、ESP8266、无线透传、L298N……]
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
