1、html部分：
<div class="goodsDetail">
<div class="indexWrap centerWrap">
<div class="top_bar">
<!-- 顶部条开始 -->
<div class="top">
<div class="left">
<div class="pageleft">
<!-- #if($!user)
<a href="http://newtest.sdfa.org.cn/" style="float: left">返回山东省足球运动协会</a>
<span class="pxlr">$!CommUtil.substring("$!{user.userName}",12)</span>
<a style="cursor:pointer;" onclick="logout();" class="lightblue">[退出]</a>
#else -->
<span class="pxlr">
欢迎 <a href="http://newtest.sdfa.org.cn/">王叶波</a>
</span>
<span class="line"></span>
<span class="pxlr">
<a href="$!webPath/user/login.htm" class="lightblue">登录</a>
</span>
<span class="pxlr">
<a href="$!webPath/register.htm" class="lightblue">注册</a>
</span>
<!-- #end -->
</div>
</div>
<div class="right">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <div class="collapse navbar-collapse" id="navbarNavDropdown"> -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
首页
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="my_order" role="button"
data-toggle="dropdown" aria-haspopup="true">我的订单</a>
<div class="dropdown-menu" aria-labelledby="my_order">
<a class="dropdown-item" href="#">已购买的宝贝</a>
<a class="dropdown-item" href="#">店铺动态</a>
<a class="dropdown-item" href="#">好友动态</a>
<a class="dropdown-item" href="#">待支付</a>
<a class="dropdown-item" href="#">待收货</a>
<a class="dropdown-item" href="#">待评价</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="business_support" role="button"
data-toggle="dropdown" aria-haspopup="true">商家支持</a>
<div class="dropdown-menu" aria-labelledby="business_support">
<a class="dropdown-item" href="#">商家中心</a>
<a class="dropdown-item" href="#">商家订单</a>
<a class="dropdown-item" href="#">商家商品</a>
<a class="dropdown-item" href="#">我的店铺</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="business_support" role="button"
data-toggle="dropdown" aria-haspopup="true">购物车</a>
<div class="dropdown-menu" aria-labelledby="business_support">
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
站内短信(<span>1</span>)
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们：400-000-2989 </a>
</li>
</ul>
<!-- </div> -->
</nav>
</div>
<script>
// top部分，鼠标移入移除事件（展示二级菜单）
$(document).ready(function () {
$('li.dropdown').stop().mouseover(function () {
$(this).addClass('open');
// $(this).find('a').attr('aria-expanded', true)
$(this).find('.dropdown-menu').addClass('show')
}).stop().mouseout(function () {
$(this).removeClass('open');
// $(this).find('a').attr('aria-expanded', true)
$(this).find('.dropdown-menu').removeClass('show')
});
});
</script>
</div>
<!-- 顶部条结束 -->
</div>
<!-- logo区域 -->
<div class="center_logo_box" style="margin-bottom: 0;">
<div class="center_main_wrap">
<div class="center_left_logo">
<img src="" class="logo" alt="">
<div>/ 谁知盘中餐 粒粒皆辛苦</div>
</div>
<div class="center_right_cover"></div>
</div>
</div>
<!-- logo区域结束 -->
</div>
<div class="navigatorBar">
<div class="bar_main">
<div>首页</div>
<div class="active">商品详情</div>
</div>
</div>
<div class="content_wrap">
<div class="content_main">
<div class="top">
<!-- 放大镜 -->
<div class="colOne">
<div id="box">
<img src="../resources/style/system/front/default/images/sg.png" class="middle" alt="">
<div id="filter"></div>
</div>
<div class="bigImg" id="max">
<img src="../resources/style/system/front/default/images/sg.png" id="maxImg" alt="">
</div>
<div class="thumb">
<div class="prev"><img src="../resources/style/system/front/default/images/prev.png" alt=""></div>
<div><img src="../resources/style/system/front/default/images/1.png" class="small" data-url="../resources/style/system/front/default/images/1.png" alt=""></div>
<div><img src="../resources/style/system/front/default/images/2.png" class="small"data-url="../resources/style/system/front/default/images/2.png" alt=""></div>
<div><img src="../resources/style/system/front/default/images/loginbg.png" class="small" data-url="../resources/style/system/front/default/images/loginbg.png" alt=""></div>
<div><img src="../resources/style/system/front/default/images/vegetables.png" class="small" data-url="../resources/style/system/front/default/images/vegetables.png" alt=""></div>
<div><img src="../resources/style/system/front/default/images/fruits.png" class="small" data-url="../resources/style/system/front/default/images/fruits.png" alt=""></div>
<div class="next"><img src="../resources/style/system/front/default/images/next.png" alt=""></div>
</div>
</div>
<!-- 规格选择 -->
<div class="colTwo">
<div class="title">新鲜荔枝 玉荷包荔枝 原筐装 净重5.5斤 生鲜 新鲜水果</div>
<div class="specification">
<div class="info_item origin_price">
<label>商品原价</label>
<div class="content" style="text-decoration: line-through;">¥10.01</div>
</div>
<div class="info_item item_price">
<label>店铺价格</label>
<div class="content">¥10.01</div>
</div>
<div class="info_item">
<label>商品重量</label>
<div class="content">1.1kg</div>
</div>
<div class="info_item">
<label>物流运费</label>
<div class="content">¥10.01</div>
</div>
<div class="info_item">
<label>销售情况</label>
<div class="content">售出1件（0条评论）</div>
</div>
<div class="info_item">
<label>关注次数</label>
<div class="content">23次</div>
</div>
<div class="info_item">
<label>种类</label>
<div class="content">
<div class="type" data-type='0'>500g</div>
<div class="type" data-type='1'>1kg</div>
<div class="type" data-type='2'>1.5kg</div>
</div>
</div>
</div>
<div class="js-mode">
<div class="counter">
<input type="text" value="1" >
<div>
<div class="counter_add"><img style="width: 13px;height:13px;" src="../resources/style/system/front/default/images/count_add.png" alt=""></div>
<div class="counter_reduce"><img style="width: 13px;height: 13px;" src="../resources/style/system/front/default/images/reduce.png" alt=""></div>
</div>
</div>
<div class="addToShop">加入购物车</div>
<div class="bugImediate">立即购买</div>
</div>
</div>
<!-- 看了又看 -->
<div class="colThree">
<div class="title">看了又看</div>
<div class="goods_list">
<div class="goods_item">
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/sg.png" alt="">
</div>
<div class="ps">海南 妃子笑荔枝2斤装</div>
<div class="price">¥99.00</div>
</div>
<div class="goods_item">
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/sg.png" alt="">
</div>
<div class="ps">海南 妃子笑荔枝2斤装</div>
<div class="price">¥99.00</div>
</div>
</div>
</div>
</div>
<div class="shop_info">
<div class="left">
<div class="modeItem">
<div class="title">
玫瑰与鹿旗舰店
</div>
<div class="content">
<div class="inShop">
<div class="imgWrap"><img src="../resources/style/system/front/default/images/jdgg.png" alt=""></div>进店逛逛
</div>
<div class="conncetSalor">
<div class="imgWrap"><img src="../resources/style/system/front/default/images/lxmj.png" alt=""></div>联系卖家
</div>
</div>
</div>
<div class="modeItem">
<div class="title">
店内搜索
</div>
<div style="padding: 10px 10px;">
<div class="form-group" style="display: flex;align-items: center;margin: 0 auto;margin-bottom: 10px;">
<span style="width: 50px;font-size: 12px;color: #4D4D4D;display: inline-block;">关键字：</span>
<input style="flex-shrink: 0;width: calc(100% - 70px);" type="text" class="form-control">
</div>
<div class="form-group" style="display: flex;margin:0;align-items: center;">
<span style="width: 50px;"></span>
<div class="search-btn">搜索</div>
</div>
</div>
</div>
<div class="modeItem">
<div class="title">
店内分类
</div>
<div class="body">
<div class="item">
<span>所有商品</span>
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/xy.png" alt="">
</div>
</div>
<div class="item">
<span>水果专区</span>
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/xy.png" alt="">
</div>
</div>
<div class="item">
<span>蔬菜专区</span>
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/xy.png" alt="">
</div>
</div>
<div class="item">
<span>蛋类专区</span>
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/xy.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="right">
<ul class="nav nav-tabs">
<li><a href="#goods_detail" class="active" data-toggle="tab">商品详情</a></li>
<li><a href="#evaluate_detail" data-toggle="tab">评价详情</a></li>
</ul>
<div class="tab-content">
<div id="goods_detail" class="tab-pane active">
<!-- 如果有数据,展示这个 -->
<div class="imgList">
<div class="imgItem">
<a href="goodsDetail.html"><img src="../resources/style/system/front/default/images/sg.png" alt=""></a>
</div>
<div class="imgItem">
<a href="goodsDetail.html"><img src="../resources/style/system/front/default/images/sg.png" alt=""></a>
</div>
</div>
<!-- 如果没有数据，展示这个 -->
<!-- <div class="noData">
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/zanwushangpin.png" alt="">
</div>
<div>暂无商品详情</div>
</div> -->
</div>
<div id="evaluate_detail" class="tab-pane ">
评价详情
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2、其他静态资源：（其中，css文件可在我的资源中下载）
<link rel="stylesheet" href="./resources/style/system/front/default/css/reset.css">
<link rel="stylesheet" href="./resources/style/system/front/default/css/common.css">
<link rel="stylesheet" href="./resources/style/system/front/default/css/goodsDetail.css">
<link rel="stylesheet" href="./resources/style/system/front/default/css/goodsDetail.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.3/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
3、jQuery部分：
// 提示信息弹出框（比如修改成功，保存成功等操作提示）
jQuery('.addToShop').click(function(){
jQuery.confirm({
title: '',
content: "<div class='imgWrap' style='width:58px;height:58px;margin:0 auto;margin-top:26px'><img style='width:100%;height:100%' src='../resources/style/system/front/default/images/success.png'/></div><div style='text-align:center;font-size:19px;color:#2F2F2F;margin:20px 0'>已成功添加至购物车</div><div style='font-size:14px;color:#949494;text-align:center'>购物车共有<span style='color:#F5B937;font-size:14px'>2</span>件商品等待结算</div><div class='toShopCarFun' style='font-size:14px;color:#fff;background:#F5B937;padding:13px;width:110px;margin:14px auto 42px;cursor:pointer'>去购物车结算</div>",
// type: 'green',
columnClass: 'medium',
closeIcon:true,
autoClose: 'cancel|5000',
buttons: {
ok: {
text: "确认",
btnClass: 'btn-primary',
keys: ['enter'],
action: function(){
// jQuery.alert('content','tittle')
}
},
cancel: {
text:'关闭',
action: function () {
// jQuery.alert('content','tittle')
jQuery('.toShopCarFun').click(function(){
jQuery.alert('点击取购物车结算')
})
}
}
},
onContentReady: function () {
// when content is fetched & rendered in DOM
this.$content.find('.toShopCarFun').click(function(){
jQuery.alert('点击取购物车结算')
});
},
});
})
var goodsType;
jQuery('.type').click(function(e){
jQuery(this).addClass('active').siblings().removeClass('active');
goodsType = e.currentTarget.dataset.type
})
jQuery('.bugImediate').click(function(){
jQuery.alert('请选择商品规格！','提示')
})
// function getTypeId(){
// }
var aSmall = document.querySelectorAll(".small");
// colOne
var oColOne = document.querySelector(".colOne");
var omiddle = document.querySelector(".middle");
var oBox = document.getElementById("box");
var oFilter = document.getElementById("filter");
var maxImg = document.getElementById("maxImg");
// 鼠标移入小图片，在中图片中显示选择的图片
for (var i = 0; i < aSmall.length; i++) {
aSmall[i].onmouseover = function () {
var src = this.getAttribute("data-url");
omiddle.src = src;
maxImg.src = src;
}
}
/放大镜//
maxImg.style.display = "none";
oBox.onmouseover = function () {
maxImg.style.display = "block";
oFilter.style.display = "block";
this.onmousemove = function (e) {
console.log(oColOne.offsetLeft)
var e = e || event;
var l = e.pageX - oColOne.offsetLeft - oFilter.offsetWidth / 2;
var t = e.pageY - oColOne.offsetTop - oFilter.offsetHeight / 2;
l = l >= oBox.offsetWidth - oFilter.offsetWidth ? l = oBox.offsetWidth - oFilter.offsetWidth : (l <= 0 ? l = 0 : l = l);
t = t >= oBox.offsetHeight - oFilter.offsetHeight ? t = oBox.offsetHeight - oFilter.offsetHeight : (t <= 0 ? t = 0 : t = t);
oFilter.style.left = l + 'px';
oFilter.style.top = t + 'px';
maxImg.style.left = -2 * l + 'px';
maxImg.style.top = -2 * t + 'px';
}
};
oBox.onmouseout = function () {
oFilter.style.display = "none";
maxImg.style.display = "none";
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
