宠喵club商品页
今天做完商城，然后做了商城中商品的展示包括图片放大镜效果。代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="img/www.ico.la_65e2dbdc4ba7689767c152dc98d4c1a8_16X16.ico" type="image/x-icon"/>
<link rel="icon" href="img/www.ico.la_65e2dbdc4ba7689767c152dc98d4c1a8_16X16.ico" type="image/x-icon"/>
<title>宠喵club 荒野盛宴 特选风味烤鹿肉荒野盛宴</title>
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
<style>
* {
margin:0px;
padding:0px;
}
#top1 {
width:100%;
height:35px;
/*border:1px solid black;*/
border-bottom:0.1px solid #9E9E9E;
}
.top1 {
width:600px;
height:35px;
/*border:1px solid black;*/
margin-left:10px;
text-align:center;
line-height:35px;
float:left;
}
.top2 {
width:300px;
height:35px;
/*border:1px solid black;*/
margin-left:410px;
text-align:center;
line-height:35px;
float:left;
}
.top1 a:hover {
cursor: pointer;
color:red;
}
a:link {
color:black;
}
.top2 a:hover{
cursor: pointer;
color:red;
}
.top3 {
width:100%;
height:130px;
/*border:1px solid black;*/
float:left;
}
.top4 {
width:260px;
height:100px;
/*border:1px solid black;*/
margin-top:0px;
margin-left:55px;
float:left;
margin-top:3px;
}
.tx {
width:498px;
height:40px;
border:1px solid red;
float:left;
margin-top:55px;
margin-left:50px;
}
.wenben {
background: #f65;
height: 43px;
width: 92px;
cursor: pointer;
float: left;
font: 18px/34px "Microsoft YaHei";
color: #fff;
border: none;
margin-top:55px;
}
.top5 {
width:450px;
height:35px;
/*border:1px solid black;*/
margin-top:95px;
margin-left:364px;
line-height:35px;
font-family: SimSun;
font-size: 14px;
color:#999;
text-decoration: none;
}
.top5-right {
width:180px;
height:40px;
/*border:1px solid black;*/
float: left;
margin-left:1113px;
margin-top:-80px;
}
.dhh {
width:100%;
height:50px;
/*border:1px solid black;*/
float: left;
background-color:#EE3B3B;
}
.dhh1, .dhh2, .dhh3, .dhh4, .dhh5, .dhh6 {
width:130px;
height:50px;
/*border:1px solid black;*/
float:left;
text-align:center;
line-height:50px;
border-right:0.3px solid #9E9E9E;
color: #FFF;
font: 18px/44px "Microsoft YaHei";
}
.dhh1:hover, .dhh2:hover, .dhh3:hover, .dhh4:hover, .dhh5:hover, .dhh6:hover {
cursor: pointer;
background-color:#EE0000;
}
.dhh1 {
margin-left:50px;
}
.dhh7 {
width:140px;
height:50px;
/*border:1px solid black;*/
float:left;
margin-left:310px;
text-align:center;
line-height:50px;
color:white;
}
.dhh7:hover {
cursor: pointer;
background-color:#EE0000;
}
.centerout {
width:100%;
height:11090px;
float:left;
}
.center1 {
width:100%;
height:40px;
background-color:#F5F5F5;
text-align:center;
line-height:40px;
}
a {
text-decoration:none;
color:black;
}
a:hover {
color:red;
}
.c3 {
width:1243px;
height:425px;
/*#DCDCDC*/
margin:0px auto;
margin-top:10px;
}
.c31 {
width:400px;
height:425px;
border:1px solid #DCDCDC;
float:left;
text-align:center;
}
.c32 {
width:610px;
height:425px;
float:left;
font-size:25px;
}
.c321 {
width:580px;
height:425px;
margin-left:15px;
font-size:22px;
}
.c3211 {
width:280px;
height:40px;
float:left;
margin-left:150px;
}
.c3211:hover {
cursor:pointer;
}
.c33 {
width:227px;
height:417px;
border:1px solid #DCDCDC;
float:left;
text-align:center;
}
.c4 {
width:1243px;
height:10600px;
border:1px solid #DCDCDC;
margin:0px auto;
margin-top:15px;
text-align:center;
}
.c41 {
width:1243px;
height:25px;
border:1px solid #DCDCDC;
background-color:#DCDCDC;
}
.bottomdhh {
width: 100%;
height: 121px;
/*border:1px solid black;*/
float: left;
margin-top: 30px;
}
.biao {
width:1243px;
height:170px;
/*border:1px solid black;*/
float:left;
margin-left:55px;
border-bottom:0.5px solid gray;
}
.biao1{
width:399px;
height:154px;
/*border:1px solid black;*/
float:left;
}
.biao2{
width:1243px;
height:154px;
/*border:1px solid black;*/
float:left;
margin-left:400px;
margin-top:-153px;
}
.biao3 {
width:844px;
height:50px;
/*border:1px solid black;*/
float:left;
border-bottom:0.5px solid gray;
margin-top:10px;
margin-left:250px;
}
.biao4 {
width:844px;
height:50px;
/*border:1px solid black;*/
float:left;
margin-left:450px;
}
.top5 span a {
color:#999;
}
.top5 span a:hover {
color:red;
}
.biao {
width:1243px;
height:170px;
/*border:1px solid black;*/
float:left;
margin-left:55px;
border-bottom:0.5px solid gray;
}
.biao1{
width:345px;
height:143px;
/*border:1px solid black;*/
float:left;
margin-top:15px;
}
.biao2{
width:140px;
height:154px;
/*border:1px solid black;*/
float:left;
margin-left:420px;
margin-top:-160px;
font-size:15px; font-weight:500
}
ul {
list-style:none;
}
.li {
text-align:center;
padding-top:5px;
}
.biao5 {
width: 140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 560px;
margin-top: -160px;
font-size: 15px;
font-weight: 500;
}
.biao6 {
width: 140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 700px;
margin-top: -160px;
font-size: 15px;
font-weight: 500;
}
.biao7 {
width: 140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 840px;
margin-top: -160px;
font-size: 15px;
font-weight: 500;
}
.biao8 {
width: 140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 1000px;
margin-top: -160px;
font-size: 15px;
font-weight: 500;
}
.biao9 {
width: 140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 1140px;
margin-top: -160px;
font-size: 15px;
}
.youhui {
text-align:center;
margin-top:-15px;
}
.biao3 {
width:844px;
height:50px;
/*border:1px solid black;*/
float:left;
border-bottom:0.5px solid gray;
margin-top:10px;
margin-left:250px;
}
.biao4 {
width:844px;
height:50px;
/*border:1px solid black;*/
float:left;
margin-left:450px;
}
.preview{width:400px; height:465px;}
/* bigImg */
.bigImg{position:relative; float:left; width:400px; height:400px; overflow:hidden;}
.bigImg #midimg{width:400px; height:400px;}
.bigImg #winSelector{width:200px; height:190px;}
#winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; border:1px solid #fff;}
/* bigView */
#bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999;margin-top:191px;}
#bigView img{position:absolute;}
</style>
</head>
<body>
<div id="top1">
<div class="top1">
<a href="一阶段项目spx.html" style="text-decoration: none;" target="_blank" >ฅ'ω'ฅ ฅ'ω'ฅ 网 </a>
<a href="喵星人.html" style="text-decoration: none;"target="_blank" > ฅ'ω'ฅ 商城 </a>
<a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank" > ฅ'ω'ฅ 服务 </a>
<a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank"> ฅ'ω'ฅ 论坛 </a>
<a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank"> ฅ'ω'ฅ 百科 </a>
</div>
<div class="top2">
<a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank" > 登录 </a>
<a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank">注册 </a>
<a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank" >微博 </a>
<a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank">微信 </a>
<a href="一阶段项目spx.html" style="text-decoration: none;" target="_blank">手机版 </a>
</div>
</div>
<div class="top3">
<div class="top4">
<img src="img/catlogo1.jpg"/> </div>
<input type="text" class="tx" id="d1" name="text"/>
<input type="submit" class="wenben" id="button" name="button" value="搜 索"/>
<div class="top5">
热门搜索：
<span><a href="http://" target="_blank" style="text-decoration: none;"> ฅ'ω'ฅ粮</a>
<a href="http://" target="_blank" style="text-decoration: none;"> ฅ'ω'ฅ商城</a>
<a href="http://" target="_blank" style="text-decoration: none;">金猫</a>
<a href="http://" target="_blank" style="text-decoration: none;">金吉拉</a></span>
</div>
<div class="top5-right">
<img src="img/ad2.gif"/>
</div>
</div>
<div class="dhh">
<div class="dhh1" style="margin-left:55px;"><a href="一阶段项目spx.html" style="text-decoration: none; color: #FFF;">首页</a></div>
<div class="dhh2"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">种类</a></div>
<div class="dhh3"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ商城</a></div>
<div class="dhh4"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ医生</a></div>
<div class="dhh5"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ天下</a></div>
<div class="dhh6"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF"target="_blank">流浪ฅ'ω'ฅ</a></div>
<div class="dhh7"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">购物车</a></div>
</div>
<div class="centerout">
<div class="center1">
首页<label style="color:red;"> ></label> <a href="喵星人.html" >ฅ'ω'ฅ商城</a> <label style="color:red;"> ></label> 粮食专区 <label style="color:red;"> ></label>进口猫粮 <label style="color:red;"> ></label> 荒野盛宴  特选风味烤鹿肉烟熏三文鱼配方 无谷物全猫粮 15磅【保质期至2018年2月26日】 >
</div>
<div class="c3">
<div class="c31"> <div class="preview">
<div id="vertical" class="bigImg">
<img src="mid/05.jpg" width="400" height="400" alt="" id="midimg" />
<div style="display:none;" id="winSelector"></div>
</div><!--bigImg end-->
</div><!--smallImg end-->
<div id="bigView" style="display:none;"><img width="800" height="800" alt="" /></div>
<script type="text/javascript">
$(document).ready(function () {
// 图片上下滚动
var count = $("#imageMenu li").length - 5; /* 显示 6 个 li标签内容 */
var interval = $("#imageMenu li:first").width();
var curIndex = 0;
// 解决 ie6 select框 问题
$.fn.decorateIframe = function (options) {
if ($.browser.msie && $.browser.version < 7) {
var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
}
}
//放大镜视窗
$("#bigView").decorateIframe();
//大视窗看图
function mouseover(e) {
if ($("#winSelector").css("display") == "none") {
$("#winSelector,#bigView").show();
}
$("#winSelector").css(fixedPosition(e));
e.stopPropagation();
}
function mouseOut(e) {
if ($("#winSelector").css("display") != "none") {
$("#winSelector,#bigView").hide();
}
e.stopPropagation();
}
$("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件
var $divWidth = $("#winSelector").width(); //选择器宽度
var $divHeight = $("#winSelector").height(); //选择器高度
var $imgWidth = $("#midimg").width(); //中图宽度
var $imgHeight = $("#midimg").height(); //中图高度
var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度
function changeViewImg() {
$("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
}
changeViewImg();
$("#bigView").scrollLeft(0).scrollTop(0);
function fixedPosition(e) {
if (e == null) {
return;
}
var $imgLeft = $("#midimg").offset().left; //中图左边距
var $imgTop = $("#midimg").offset().top; //中图上边距
X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
X = X < 0 ? 0 : X;
Y = Y < 0 ? 0 : Y;
X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;
if ($viewImgWidth == null) {
$viewImgWidth = $("#bigView img").outerWidth();
$viewImgHeight = $("#bigView img").height();
if ($viewImgWidth < 200 || $viewImgHeight < 200) {
$viewImgWidth = $viewImgHeight = 800;
}
$height = $divHeight * $viewImgHeight / $imgHeight;
$("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
$("#bigView").height($height);
}
var scrollX = X * $viewImgWidth / $imgWidth;
var scrollY = Y * $viewImgHeight / $imgHeight;
$("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
$("#bigView").css({ "top": 75, "left": $(".preview").offset().left + $(".preview").width() + 15 });
return { left: X, top: Y };
}
});
</script></div>
<div class="c32">
<div class="c321">
荒野盛宴 特选风味烤鹿肉烟熏三文鱼配方无谷物全猫粮 15磅【保质期至2018年2月26日】 <br /><br />
<img src="img/cma.png" /><br />
<label style="font-size:13px"> 配 送 至 ： <select><option>山东</option></select>  有货； </label> <label style="font-size:13px;color:red;">支持使用优惠券</label><br />
<label style="font-size:13px"> 服     务 : 本商品由 香 港2仓 发货 </label><br />
<label style="font-size:13px"> 税     收 : <del><label style="color:red;">¥31.9</label></del> </label><br />
<div class="c3211"><img src="img/daohuo.png" /> <br />
<label style="font-size:15px;color:red;">收藏商品</label><br />
<label style="font-size:13px;">选择到货通知，到货后您将收到免费短信提醒！</label>
</div>
</div>
</div>
<div class="c33"><img src="img/weixin.png" /></div>
</div>
<div class="c4">
<div class="c41">商品介绍</div><br />
<img src="img/cpys2.png" /><br />
<img src="img/lulu.jpg" /><br /><br />
<img src="img/cpys1.png" /><br />
<img src="img/cpys3.jpg" /><br />
<img src="img/cpys4.jpg" /><br />
<img src="img/cpys5.jpg" /><br />
<img src="img/cpys6.jpg" /><br />
<img src="img/cpys9.jpg" /><br />
<img src="img/cpys10.jpg" /><br />
<img src="img/cpys11.jpg" /><br />
<img src="img/cpys12.jpg" /><br />
<img src="img/cpys13.jpg" /><br />
<img src="img/cpys15.jpg" /><br />
<img src="img/cpys17.jpg" /><br />
<img src="img/cpys22.jpg" /><br />
<img src="img/cpys23.jpg" /><br />
<img src="img/cpys24.jpg" /><br />
<img src="img/cpys26.jpg" /><br />
</div>
</div>
<div class="bottomdhh"><img src="img/1347.121.jpg" /></div>
<div class="biao">
<div class="biao1">
<img src="img/345.143.jpg" /></div>
</div>
<div class="biao2">
<ul>
<li class="li"><h4>支付方式</h4><br /></li>
<li class="li"> 货到付款<br /></li>
<li class="li">余额支付<br /></li>
<li class="li">在线支付<br /></li>
</ul>
</div>
<div class="biao5">
<ul>
<li class="li"><h4>配送方式</h4><br /></li>
<li class="li"> 宠喵快递<br /></li>
<li class="li">外包快递<br /></li>
<li class="li">物流运输<br /></li>
<li class="li">公司地址<br /></li>
</ul>
</div>
<div class="biao6">
<ul>
<li class="li"><h4>购物指南</h4><br /></li>
<li class="li"> 退换货政策<br /></li>
<li class="li">时代杂志<br /></li>
<li class="li">常见问题<br /></li>
<li class="li">宠物知识<br /></li>
</ul>
</div>
<div class="biao7">
<ul>
<li class="li"><h4>关于我们</h4><br /></li>
<li class="li"> 关于我们<br /></li>
<li class="li">仓储中心<br /></li>
<li class="li">联系我们<br /></li>
<li class="li">人才招聘<br /></li>
</ul>
</div>
<div class="biao8">
<ul>
<li class="li"><h4>扫描下载APP</h4><br /></li>
<li class="youhui">下单更优惠<br /></li>
</ul>
<br />
<img src="img/91.89.jpg" style="margin-left:27px;margin-top:-5px;"/>
</div>
<div class="biao9">
<ul>
<li class="li"><h4>扫描关注宠喵</h4><br /></li>
<li class="youhui">商城微信<br /></li>
</ul>
<br />
<img src="img/90.91.jpg" style="margin-left:27px;margin-top:-5px;" />
</div>
<div class="biao3"><img src="img/biao1.jpg.jpg" /></div>
<div class="biao4"><img src="img/biao.888.jpg.jpg" /></div>
</body>
</html>
