[img]http://files.jb51.net/file_images/article/201503/201503141425575.jpg[/img]
[b]HTML[/b]
首先载入jQuery库文件和jquery.fly.min.js插件。
[url=#]
</div>
<div class="box">
<img src="images/hs.jpg" width="180" height="180">
<h4>￥<span>3799.00</span></h4>
<p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p>
<a href="#" class="button orange addcar">加入购物车</a>
</div>
<div class="box">
<img src="images/cw.jpg" width="180" height="180">
<h4>￥<span>￥3999.00</span></h4>
<p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p>
<a href="#" class="button orange addcar">加入购物车</a>
</div>
<div class="box">
<img src="images/ls.jpg" width="180" height="180">
<h4>￥<span>6969.00</span></h4>
<p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p>
<a href="#" class="button orange addcar">加入购物车</a>
</div>
然后，我们还需要在页面的右侧加上购物车以及提示信息。
<div class="m-sidebar">
<div class="cart">
<i id="end"></i>
<span>购物车</span>
</div>
</div>
<div id="msg">已成功加入购物车！</div>
[b]CSS[/b]
我们使用CSS先将商品排列美化，然后设置右侧购物车样式，具体请看代码：
[url=https://github.com/amibug/fly]https://github.com/amibug/fly[/url]，值得一提的是，IE10以下需要添加以下js：
<script src="requestAnimationFrame.js"></script>
以上就是本文的全部内容了，希望大家能够喜欢
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
