English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Es gibt sehr viele Codes zur Implementierung des Einkaufswagens im Internet. Heute habe ich einige Kenntnisse gesehen und habe beschlossen, selbst Hand anzulegen, daher habe ich einen einfachen Einkaufswagen geschrieben. Hier wird die spezifische Implementierung erläutert.
1、mit html den Inhalt implementieren;
2、mit css das Aussehen gestalten;
3、mit js(jq) Animationen gestalten.
Schritt 1:Zunächst ist das Design der HTML-Seite, ich verwende einen großen div, um alle Produkte zu enthalten, und dann verwende ich verschiedene divs, um verschiedene Produkte zu verpacken. In der Produktliste verwende ich ul li, das spezifische Implementierungscode ist wie folgt (die beteiligten Produkte sind einfach von Internet kopiert und haben keinen Referenzwert):
<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">Viele Gedichte in "Die Sammlung der fliegenden Vögel" sind in Bengali geschrieben, und diese Sammlung wurde ursprünglich von Herrn Zheng Zhenzhou ins Chinesische übersetzt.</li>
<li class="godadd"><a href="javascript:;">Einkaufswagen hinzufügen</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">Dieses Buch beschreibt, wie man mit vorhandenen Web-Technologien Android-Anwendungen erstellt.</li>
<li class="godadd"><a href="javascript:;">Einkaufswagen hinzufügen</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">Mit Worten die Zeit besiegen. Feng Tangs meistverkauftes Werk, die Essays sind seine am besten verkaufte und beliebteste Arbeit.</li>
<li class="godadd"><a href="javascript:;">Einkaufswagen hinzufügen</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">Viele Gedichte in "Die Sammlung der fliegenden Vögel" sind in Bengali geschrieben, und diese Sammlung wurde ursprünglich von Herrn Zheng Zhenzhou ins Chinesische übersetzt.</li>
<li class="godadd"><a href="javascript:;">Einkaufswagen hinzufügen</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">Dieses Buch beschreibt, wie man mit vorhandenen Web-Technologien Android-Anwendungen erstellt.</li>
<li class="godadd"><a href="javascript:;">Einkaufswagen hinzufügen</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">Mit Worten die Zeit besiegen. Feng Tangs meistverkauftes Werk, die Essays sind seine am besten verkaufte und beliebteste Arbeit.</li>
<li class="godadd"><a href="javascript:;">Einkaufswagen hinzufügen</a></li>
</ul>
</div>
</div>
<div id="godcar">
<div class="dnum">0</div>
<div class="dcar">
<img src="images/car.jpg">
</div>
</div>
Dabei geht es um ein Wissen: In <li class="godadd"><a href="javascript:;">Einkaufswagen hinzufügen</a></li>中使用javascript:;，was bedeutet, dass keine Umleitung erfolgt und ein leeres Ereignis ausgeführt wird.
Schritt 2:Für das Design der Optik habe ich die Div-Elemente jeder Produktliste auf width und height sowie border gesetzt, um eine bessere Anzeige zu ermöglichen. Es ist zu beachten, dass ich den Einkaufswagen an einer bestimmten Position fixiert habe, indem ich die Position auf fixed gesetzt habe und durch das Festlegen von top und left ihn an der gewünschten Position befestigt habe. Außerdem lernen Sie, den Umfang von margin und padding flexibel zu nutzen, um eine schönere Anzeige zu erzielen.
Anmerkung:Wenn Sie dem Inline-Element width und height oder andere Attributwerte für blockige Elemente zuweisen möchten, müssen Sie display:block festlegen.
Konkretes Design-Code wie folgt:
* {
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;
};
Der Erste*Es ist eine gute Gewohnheit, für alle Elemente Attribute zu setzen, indem man一开始 Margin und Padding setzt.
Dritter Schritt:Eine statische Seite wurde implementiert, nun muss durch jq die spezifische Implementierung des Warenkorbs durchgeführt werden, z.B. das Hinzufügen von Produkten zum Warenkorb, die Änderung der Warenkorbanzahl usw. Ich habe ein bisschen Zeit in den Designprozess investiert: Wie können die Bilder beim Hinzufügen von Produkten zum Warenkorb langsam in den Warenkorb bewegt und schließlich verschwinden? Dazu habe ich die animate-Funktion verwendet. Der Schwierigkeitsgrad dieser Funktion liegt darin: Wie bewegt sich das Bild, wie ändert es sich?
Nun erkläre ich, wie dieser Prozess implementiert wird:
1) Zunächst müssen die Bilder der Produkte erhalten werden, und dann muss ein Abbild der erhaltenen Bilder erstellt werden;
var img = $(this).parent().find(".godpic").find("img");
var cimg = img.clone();
2) die Top- und Left-Werte der Produktbilder und der Warenkorbtop- und left-Werte erhalten, damit sie durch die animate-Funktion bewegt werden können; var imgtop = img.offset().top;
var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left;
3) die animate-Funktion schreiben, um spezifische Effekte zu erreichen;
cimg.appendTo($("body")).css({
"position": "absolute",//Absoluter Position
"opacity": "0.7",
"top": imgtop,
"left": imgleft
}).animate({
"top": cartop,
"left": carleft,
"width": "40px",
"height": "40px",
"opacity": "0.3" //Transparenz
}, 1000, function () {
cimg.remove(); //Vernichtung des Bildes
$(".dnum").text(i); //Änderung der Warenkorbanzahl
});
Einfache Verschiebung und Veränderung wird erreicht.
Aber dann dachte ich, dass es nicht der Realität entspricht, dass die Anzahl der Warenkorbartikel jedes Mal auf 0 zurückgesetzt wird, wenn die Seite neu geladen wird, also dachte ich darüber nach, wie ich die Anzahl der Warenkorbartikel beim Neuladen der Seite nicht ändern lassen kann. Nachdem ich Informationen gesammelt und zusammengefasst habe, habe ich drei Methoden gefunden:
(1) in die Datenbank speichern;
(2) durch Cookie-Methode;
(3) durch h5die Methode localStorage;
Letztendlich habe ich mich für die dritte Methode entschieden, weil ich h probieren wollte5neue Methode (aus Neugier~~, auch weil ich gerade diese Methode sah, also probiere ich es aus), die Daten, die mit localStorage gespeichert werden, haben keine Zeitbegrenzung. Am nächsten Tag, in der zweiten Woche oder im nächsten Jahr sind die Daten immer noch verfügbar. Meine spezifische Implementierung: localStorage.getItem.
Gut, alles, was gesagt werden musste, ist gesagt. Hier ist das gesamte jq-Code, wenn Ihnen das gefällt, geben Sie bitte ein Daumen hoch:
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（在发邮件时，请将#更换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）