电子商务网站之产品页

记录制作电子商务网站之产品页

概述：
产品页布局和首页类似，中间部分分为左侧产品展示，右侧细节展示，下方选项卡特效

产品展示（放大镜效果）

<!--      图片实现放大镜效果 --><div id="demo"><div id="small-box"><div id="mark"></div><div id="float-box"></div><a><img src="img/cloth_small.jpg" width="100%" height="103%"id="bigImg" alt="动漫周边衣服"></a></div><div id="big-box"><img src="img/cloth_big.jpg" /></div></div>

<script>//页面加载完毕后执行window.onload = function () {//找六个个元素：demo，smallBox,foatBox,mark,bigfloatBox,imgs,var objDemo=document.getElementById("demo");var objSmallBox=document.getElementById("small-box");var objMarkBox=document.getElementById("mark");var objFloatBox=document.getElementById("float-box");var objBigBox=document.getElementById("big-box");var objBigBoxImg=objBigBox.getElementsByTagName("img")[0];//给小盒子添加事件，移入和移出//移入：浮动的box和和bigBox显示objSmallBox.onmouseover=function(){objFloatBox.style.display="block";objBigBox.style.display="block";}//移除：浮动的box和bigBox隐藏objSmallBox.onmouseout=function(){objFloatBox.style.display="none";objBigBox.style.display="none";}//给小盒子添加鼠标移动事件objMarkBox.onmousemove=function(ev){var _event=ev||window.event;//做兼容性，兼容IE//1计算值：var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;//5.优化，在前面加判断,不让其溢出，加判断if(left<0) left=0;if(top<0) top=0;if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;//2把值赋值给放大镜objFloatBox.style.left=left+"px";objFloatBox.style.top=top+"px";//3计算比例var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight);//4利用这个比例计算距离后赋值给右侧的图片objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";}}</script>

放大镜效果引用原地址

产品细节展示
1、尺寸和价格计算

 <li class="pro_size"><span>尺&#12288;&#12288;寸：</span> <strong>未选择</strong><ul><li>S</li><li>L</li><li>SL</li><li>LL</li></ul></li><li><span>数&#12288;&#12288;量：</span><div class="pro_num"><select id="num_sort"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></li><li class="pro_price"><span>总&#12288;&#12288;计：</span> <strong>109</strong>元</li></ul>

<script>
/*衣服尺寸选择*/
$(function(){$(".pro_size li").click(function(){$(this).addClass("cur").siblings().removeClass("cur");$(this).parents("ul").siblings("strong").text(  $(this).text() );})
})
/*数量和价格联动*/
$(function(){var $span = $(".pro_price strong");var price = $span.text();   $("#num_sort").change(function(){var num = $(this).val();var amount = num * price;$span.text( amount );}).change();
})
</script>

2、商品评分

<div class="pro_rating">给商品评分：<ul class="rating nostar"><li class="one"><a title="1分" href="#">1</a></li><li class="two"><a title="2分" href="#">2</a></li><li class="three"><a title="3分" href="#">3</a></li><li class="four"><a title="4分" href="#">4</a></li><li class="five"><a title="5分" href="#">5</a></li></ul></div>

<script>
/*商品评分效果*/
$(function(){//通过修改样式来显示不同的星级$("ul.rating li a").click(function(){var title = $(this).attr("title");alert("您给此商品的评分是："+title);var cl = $(this).parent().attr("class");$(this).parent().parent().removeClass().addClass("rating "+cl+"star");$(this).blur();//去掉超链接的虚线框return false;})
})
</script>

选项卡效果

<div id="box1"><ul id="tab"><li class="act1">宝贝详情</li><li>产品评价</li><li>专享服务</li><li>价格说明</li></ul><div id="content2"><div><ul><li>适用年龄: 6周岁以上</li><li>风格: 休闲 可爱 朋克 通勤</li><li>适用性别:通用</li><li>颜色分类: 01 02 03</li><li>周边产品: T恤<li>出售状态: 现货</li><li>动漫地区: 日本</li><li>适用季节: 夏季</li><li>大小: S 儿童码咨询客服哦</li><li>作品名: 从零开始的异世界生活</li></ul></div><div id="con" class="hide"><ul><li><a href="1.html" id="a1">质量很好（40）</a></li><li><a href="2.html" id="a1">图案很好看（3）</a></li><li><a href="3.html" id="a1">穿着效果很好（15）</a></li><li><a href="4.html" id="a1">性价比高（18）</a></li><li><a href="5.html" id="a1">面料很好（21）</a></li><li><a href="6.html" id="a1">手感舒服（5）</a></li><li><a href="7.html" id="a1">穿着合身（11）</a></li></ul></div><div id="con1" class="hide"><center>卖家承诺以下服务</center>&nbsp;&nbsp;&nbsp;&nbsp;<img src="img/zhuanxiang.png">消费者保障服务:<br><p>&nbsp;&nbsp;&nbsp;该卖家已缴纳 2001.0 元保证金。<p><p>&nbsp;&nbsp;&nbsp;在确认收货 15天内，如有商品质量问题、描述不符或未收到货等，您有权申请退款或退货，来回邮费由卖家承担。</p></div><div class="hide">划线价格：<br><p>指商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</p>未划线价格:<br><p>指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</p><p>商家详情页（含主图）以图片或文字形式标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格。</p></div></div></div>

css


#box1 {float: left;width: 400px;height: 240px;margin-left: 15px;margin-top: 6px;
}.hide {display: none
}#tab {height: 30px;border: 1px solid #ccc;width: 520px;
}#tab li {float: left;width: 100px;height: 24px;border-bottom: none;background: #fbc4f2;line-height: 24px;margin: 0 4px;border: 1px solid #ccc;border-bottom: none;text-align: center;cursor: pointer;font-size: 20px
}#tab .act1 {height: 30px;background: #fff;
}#content2 {border: 1px solid #ccc;border-top: none;height: 200px;width: 650px;font-size: 16px;
}#content2 li {float: left;margin: 0px 5px;list-style: none;width: 200px;height: 45px;text-align: left;
}#con {width: 600px;height: 600px
}#con a:link { /*默认状态*/text-decoration: none;color: black;background: #8080ff;
}#con a:visited { /*浏览过的*/color: darkgrey;
}#con a:hover { /*悬浮状态*/color: #ff80c0;
}#con a:active { /*激活过的*/color: red;
}#con li {float: left;margin: 5px 5px;list-style: none;width: 190px;height: 45px;text-align: left;
}

产品页展示

电子商务网站之产品页相关推荐

电子商务网站数据库产品表设计方案
方案一. 就一个产品表 product,然后这个表里包括所有的产品属性,每个属性用一个字段表示. 方案二. 还是只用一个产品表 product . 与方案一不同的是,私有属性设置为一个字段 Pri ...
如何压力测试电子商务网站
如何压力测试电子商务网站第1页:背景与面临的挑战! 如今,与百姓日常生活密切的电子商城.网络订票和网上银行等系统都是电子商务网站的典型案例.这些系统涵盖了产品宣传展示.商品选购.交易结算.服务与客户 ...
电子商务网站SEO推广策略
B2C电子商务网站建站初期,在没有大量资金进行陆海空多方广告宣传推广的前提下,寻找一种低成本.见效快.效果持久的网站推广方法:搜索引擎优化(SEO)无疑是最佳选择.而对于电子商务网站来说,在开发过程中 ...
45个优秀的国外电子商务网站设计实例
这篇文章与大家分享45个国外优秀的电子商务网站设计案例,希望能带给你灵感.对于电子商务网站来说,也许销售更多产品比漂亮的外观设计更重要,不过漂亮的东西总是能给用户留下深刻的印象,一起欣赏. TALBO ...
一个母婴电子商务网站贝贝网的大数据平台及机器学习实践【转】
关键字:大数据平台.机器学习贝贝网的主要产品是垂直的母婴类,母婴相对一般的电子商务网站有一些特点:第一个特点是商品周期短,在母婴网站上的商品,在线的时间不会超过5-7天,第二个是用户需求的变化快,在 ...
25个国外优秀电子商务网站设计案例
优秀网站设计案例分享35个非常漂亮的单页网站设计案例 25个国外优秀的餐饮网站设计案例欣赏最新30个漂亮的个人作品集网页设计案例 30个非常优秀的网站导航菜单设计案例 12个优秀的 HTML5 网 ...
B2B电子商务网站杂谈
B2B电子商务网站作为网络营销的交易平台, 一方面要保证功能完善, 买卖双方可以快捷.方便地进行交易.另一方面网站的宣传是挖掘潜在客户的重要手段, 只有2 个方面都足够强大, 才能使相应B2B 电子 ...
【渝粤教育】电大中专电子商务网站建设与维护 (14)作业题库
1.诚信通是阿里巴巴为从事中国国内贸易的中小企业推出的会员制网上贸易服务,主要用以解决网络贸易信用问题. ( ) A.正确 B.错误错误正确答案:左边查询学生答案:未作答 2.阿里巴巴是于199 ...
【渝粤教育】电大中专电子商务网站建设与维护 (7)作业题库
1.阿里巴巴是于1999年创立的( )的网上贸易市场平台. A.零售商对消费者 B.企业对消费者 C.企业对企业 D.企业对零售商错误正确答案:左边查询学生答案:未作答 2.阿里巴巴网站的不足不 ...

电子商务网站之产品页

记录制作电子商务网站之产品页

电子商务网站之产品页相关推荐

最新文章

热门文章