English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
В Интернете много кода для реализации корзины покупок, сегодня я изучил несколько знаний, решил сам написать, поэтому я написал простую корзину покупок,接下来讲解一下具体的实现。
1、Реализация контента с помощью html;
2、Декорирование внешнего вида с помощью css;
3、Создание анимации с помощью js(jq).
Шаг 1:Сначала идет дизайн html страницы, я использую большой div, чтобы включить все товары, затем с помощью различных div я упаковываю различные товары, в списке товаров я использую ul li, конкретное выполнение кода такое (код,涉及的到的商品都是网上随便copy的，不具有参考价值):
<div id="goods">
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/1.png"></li>
<li class="godprice">25.00￥</li>
<li class="godinfo">Многие из стихов в "Сборнике пташек" написаны на бенгальском языке, эту книгу впервые представил в Китае господин Zheng Zhen duo.</li>
<li class="godadd"><a href="javascript:;">добавить в корзину</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/2.png"></li>
<li class="godprice">56.00￥</li>
<li class="godinfo">Эта книга рассказывает, как использовать существующие веб-технологии для создания приложений для Android.
<li class="godadd"><a href="javascript:;">добавить в корзину</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/3.png"></li>
<li class="godprice">37.00元</li>
<li class="godinfo">Словами можно победить время.冯唐最受欢迎的作品，杂文才是其销量最好、最受欢迎的作品。</li>
<li class="godadd"><a href="javascript:;">добавить в корзину</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/1.png"></li>
<li class="godprice">25.00￥</li>
<li class="godinfo">Многие из стихов в "Сборнике пташек" написаны на бенгальском языке, эту книгу впервые представил в Китае господин Zheng Zhen duo.</li>
<li class="godadd"><a href="javascript:;">добавить в корзину</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/2.png"></li>
<li class="godprice">56元</li>
<li class="godinfo">Эта книга рассказывает, как использовать существующие веб-технологии для создания приложений для Android.
<li class="godadd"><a href="javascript:;">добавить в корзину</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/3.png"></li>
<li class="godprice">37.00元</li>
<li class="godinfo">Словами побеждайте время. Самый продаваемый труд Фэндуна, его статьи являются самыми продаваемыми и самыми популярными работами.
<li class="godadd"><a href="javascript:;">добавить в корзину</a></li>
</ul>
</div>
</div>
<div id="godcar">
<div class="dnum">0</div>
<div class="dcar">
<img src="images/car.jpg">
</div>
</div>
В этом涉及到 один из моментов: в <li class="godadd"><a href="javascript:;">добавить в корзину</a></li> я использовал javascript:; это означает, что не происходит переход, выполняется пустое событие.
Второй шаг:Для дизайна внешнего вида, чтобы лучше отображаться, я установил width и height, а также границу для каждого div списка товаров, что важно. Чтобы карзина была фиксирована в определенном месте, я установил position:fixed, а затем установил top и left, чтобы она фиксировалась в нужном месте. Кроме того, нужно уметь灵活 использовать margin и padding, чтобы сделать отображение более美观ым.
Примечание:Если нужно установить width и height для инлайн-элементов или свойства других блочных элементов, необходимо установить display:block.
Конкретный код дизайна如下:
* {
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
}
.goodsItem{
width:280px;
height: 400px;
float: left;
border: 1px solid #ccc;
margin: 5px;
}
#goods{
width: 910px;
}
.goditem{
list-style: none;
}
.godpic img{
display: block;
width: 250px;
height: 250px;
margin: 0px auto;
}
.godprice,.godinfo,.godadd{
display: block;
width: 220px;
margin: 0px auto;
text-align: center;
}
.godprice{
font-size: 20px;
color: #f00;
}
.godinfo{
text-align: center;
font-size: 14px;
margin: 10px 0px;
}
.godadd a{
display: block;
width: 150px;
height: 36px;
background-color: #fd6a01;
border-radius: 10px;
margin: 0px auto;
text-decoration: none;
color: #fff;
line-height: 36px;
}
#godcar{
position: fixed;
right: 0px;
top: 40%;
width: 72px;
height: 64px;
}
#godcar .dnum{
width: 24px;
height: 24px;
border-radius: 12px;
background-color: #f00;
text-align: center;
line-height: 24px;
position: absolute;
font-size: 12px;
top: 0px;
}
.godadd .bg {
background-color: #808080;
}
Первая * означает установку свойств для всех элементов, в начале хорошо установлять margin и padding.
Третий шаг：Реализована статическая страница,接下来需要通过jq进行购物车具体的实现，比如加入购物车，购物车数量变化等。我花了一些时间在设计：如何让商品加入购物车时，图片能够慢慢移动到购物车，然后变小，最后消失。其中，我用到了animate函数实现这个过程。要实现这个功能的难点在于：图片要怎么移动，怎么变化。
Далее讲解如何实现这个过程:
1) Сначала нужно получить изображение товара, а затем сделать копию этого изображения;
var img = $(this).parent().find(".godpic").find("img");
var cimg = img.clone();
2) Получить значения top и left изображения товара, значения top и left корзины, так как только через функцию animate можно реализовать перемещение;
var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left;
3) Написать функцию animate, чтобы реализовать конкретный эффект;
cimg.appendTo($("body")).css({
"position": "absolute",// абсолютное позиционирование
"opacity": "0.7",
"top": imgtop,
"left": imgleft
}).animate({
"top": cartop,
"left": carleft,
"width": "40px",
"height": "40px",
"opacity": "0.3" // прозрачность
}, 1000, function () {
cimg.remove(); // изображение исчезает
$(".dnum").text(i); // изменение количества товаров в корзине
});
Простое перемещение и изменение реализованы.
Но затем я решил, что каждый раз, когда страница обновляется, количество товаров в корзине возвращается к нулю, не соответствует реальности, поэтому я подумал, как можно реализовать, чтобы количество товаров в корзине не изменялось при обновлении страницы, изучил материалы, обобщил три метода:
(1) сохранение в базу данных;
(2) через метод cookie;
(3) через метод localStorage h5;
В конце я решил использовать третий способ, потому что хотел попробовать новый метод h5 (из любопытства~~, также потому что刚好 увидел этот метод, решил попробовать), данные, хранящиеся в localStorage, не имеют ограничений по времени. Через день, через неделю или через следующий год данные все еще будут доступны. Конкретное реализация моего кода: localStorage.getItem.
Готово, все, что нужно было рассказать, сказано, прилагается весь код jq, если нравится, поставь лайк:
var i = 0;
$(function() {
var inum = 0;
if(localStorage.getItem("inum")!==null){
inum = localStorage.getItem("inum");
}
$(".dnum").text(inum);
$(".godadd").click(function() {
if (!$(this).find("a").hasClass("bg")) {
i++;
$(this).find("a").addClass("bg");
var img = $(this).parent().find(".godpic").find("img");
var cimg = img.clone();
var imgtop = img.offset().top;
var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left;
cimg.appendTo($("body")).css({
"position": "absolute",
"opacity": "0.7",
"top": imgtop,
"left": imgleft
}).animate({
"top": cartop,
"left": carleft,
"width": "40px",
"height": "40px",
"opacity": "0.3"
}, 1000, function () {
cimg.remove();
$(".dnum").text(i);
localStorage.setItem("inum", i);
});
}
});
});
Эскиз:
Вот и все, что было в этой статье, надеюсь, это поможет вам в изучении. также希望大家多多支持呐喊教程。
Заявление: содержимое статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, веб-сайт не имеет права собственности, не был отредактирован вручную, не несет ответственности за соответствующие юридические вопросы. Если вы обнаружите подозрительное содержание о нарушении авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для отчета,并提供 соответствующие доказательства. При подтверждении факта нарушения авторских прав сайт незамедлительно удаляет涉嫌侵权的内容.