CSS Touch Action
In diesem Handbuch zeigen wir Ihnen, wie Sie diese Werte in der Eigenschaft „Touch-Action“ einstellen und wie sie funktionieren wird. Wir werden die Werte der Eigenschaft „Touch-Action“ in den verschiedenen Beispielen in diesem Leitfaden ausführlich diskutieren. Schauen Sie sich die angegebenen Beispiele an und lesen Sie sie gründlich durch.
Beispiel 1:
Jetzt führen wir unser erstes Beispiel durch, indem wir die neue Datei in der Visual Studio -Code -Software öffnen. Im Visual Studio -Code haben wir beim Erstellen einer neuen Datei die Möglichkeit, die Sprache auszuwählen. Wir wählen die HTML. Zuerst erstellen wir den HTML -Code. Der Visual Studio -Code bietet uns die Einrichtung, um die grundlegenden Tags automatisch durch Puting zu erhalten. “!"Und dann drücken Sie" EINGABEN ". Also nutzen wir diese Einrichtung und erhalten all diese grundlegenden Tags.
Beginnen Sie nun vom Körper und fügen Sie einen "DIV" -Container mit dem Namen "Image Touch-Auto" hinzu. In diesem Container „Image Touch-Auto“ verwenden wir das Bild-Tag, um das Bild hinzuzufügen. Wir wenden die Eigenschaft „Touch-Action“ auf dieses Bild an. Wir fügen das Bild hinzu.png ”in diesem HTML -Code. Nachdem wir diesen Code abgeschlossen haben, speichern wir dies und gehen in die CSS -Datei. Vergessen Sie nicht, diese CSS -Datei mit der aktuellen HTML -Datei zu verknüpfen. Um die Dateien zu verknüpfen, verwenden wir das Tag "Link" in der Eigenschaft "Kopf".
Wir setzen die "Körper" zuerst und nutzen die Eigenschaft "Display". Der Wert, den wir hier verwenden, ist „Flex“, ein eindimensionales Layout. Dann setzen wir die Eigenschaft "Flex-Wrap" auf "Wrap". Es wird verwendet, um anzugeben, dass die Elemente von Flex in mehrere Zeilen eingewickelt sind. Nachdem wir den Körper eingestellt haben, bewegen wir uns auf das „Bild“ zu und verwenden einige Eigenschaften, die wir hier benötigen. Wir setzen das Div mit dem Namen "Bild" "Rand" auf "1REM" und einen "500px" -Wert für die "Breite" des Div "Image" und "500px" für die "Höhe". Wir verwenden auch die Eigenschaft "Überfluss" und setzen sie auf "Scrollen". Es fügt die "Scrollbar" für das Div mit dem Namen "Bild" hinzu. Wir setzen seine "Position" auf "Relativ" und nutzen das "Rand-Bottom" auf "15px". Es wird verwendet, um die Breite der unteren Seite anzugeben.
Jetzt haben wir das "Bild img". Dafür setzen wir nur die „Breite“ und „Höhe“ und setzen den Wert auf „600px“ für jeden von ihnen. Nach all diesen verwenden wir die Eigenschaft "Touch-Auto" und setzen seinen Wert auf "Auto" fest. Dieses Auto wird verwendet, um das Bild in alle Richtungen zu bewegen, und bietet allen Browser -Operationen wie Gesten und Schwenken. Wenn der Touchscreen -Benutzer diesen Bildschirm berührt, bewegt sich dieses Bild in alle Richtungen.
Wir bieten die Ausgabe hier, wo wir gezeigt haben, dass dieses Bild in alle Richtungen bewegt wird. Wir haben auch eine Scrollbar hier. Aber wenn der Touchscreen -Benutzer dies verwendet und diesen Bildschirm berührt, wird er dieses Bild in eine beliebige Richtung bewegen, wo immer er/sie will.
Beispiel #2:
Der HTML -Code, den wir hier verwenden, ist der gleiche wie im ersten Beispiel. In diesem Beispiel verwenden wir die Eigenschaft "Touch-Action" mit dem Wert "Pan-Y".
Hier setzen wir das "Display: Flex" und "Flex-Wrap", um den "Körper" zu "umwickeln". Dann setzen wir den „Rand“ als „1REM“ und „Breite“ und „Höhe“ auf „700px“ bzw. „500px“. Das Schlüsselwort "Scroll" wird hier für die Eigenschaft "Überlauf" festgelegt. Und setzen. Die Werte „Breite“ und „Höhe“ des Bildes hier sind jeweils „600px“. Wie wir im Overhead -Beispiel besprochen haben.
Jetzt verwenden wir den Wert "Pan-Y" für die Eigenschaft "Touch-Action". Dieses „Pan-y“ beschränkt den Touchscreen-Benutzer so, dass dieses Bild nur in die y-Region verschoben wird. Der Touchscreen-Benutzer verschiebt dieses Bild in der X-Region nicht, da wir das „Pan-y“ als Wert dieser Eigenschaft „Touch-Action“ verwenden.
In der Ausgabe präsentieren wir nur eine Scrollbar, um dieses „Pan-y“.
Beispiel #3:
Hier ist der gesamte Code der gleiche wie im vorherigen Beispiel. Aber hier verwenden wir das „Pan-X“ als Wert der Eigenschaft „Touch-Action“. Wenn wir den Wert dieser Eigenschaft als „PAN-X“ festlegen. Wenn der Benutzer dieses Bild in die y-Achse-Richtung verschieben möchte, geschieht nichts, und dieses Bild bewegt sich aufgrund des Werts „Pan-X“ nicht in die y-Achse-Richtung.
Wir bieten diese Ausgabe für Sie, sodass Sie diesen „Pan-X“ -Swert lernen und die Bildlaufleiste sehen, die Ihnen zeigt, dass sie sich nur in der X-Achsenrichtung bewegt. Wenn der Touchscreen-Benutzer dies berührt und auf die X-Achse bewegt, bewegt sich das Bild in diese Richtung. Wenn der Touchscreen-Benutzer dieses Bild jedoch in die y-Achse-Richtung bewegt, bewegt sich das Bild nicht in dieser y-Achse-Richtung.
Beispiel Nr. 4:
Wir ändern den HTML -Code. Hier fügen wir ein weiteres Bild hinzu und setzen einen Absatztext auf dieses Bild ein. Wir verwenden in diesem Beispiel den Wert „Pan-Right“ der Eigenschaft „Touch-Action“.
Alle Eigenschaften, die wir hier für den „Körper“, „Bild“ und „Bild img“ verwenden. Wir fügen die neuen Eigenschaften für den Text hinzu, den wir auf dem Bild geschrieben haben. Wir setzen die „Position“ des Absatzes mit dem Namen „Typ-Touch“ auf „Absolute“ und setzen seine „Breite“ auf „100%“. Wir richten den Text im „Zentrum“ an, indem wir die "Text-Align" verwenden und die Eigenschaft "Schriftgewicht" auf "BOLD" festlegen, das hier ein Schlüsselwort ist. Wir setzen den "130px" "Top" für den Absatztext.
Danach verwenden wir die Eigenschaft „Schriftgröße“ und setzen die „24px“ als Wert. Wir ändern die "Schriftfamilie" dieses Absatztextes in "Algerian". Dann verwenden wir den Wert "Pan-Right" für die "Touch-Action". Wenn dieser Wert für diese Eigenschaft verwendet wird, kann der Touchscreen -Benutzer das Element nur in die richtige Richtung verschieben. Wenn wir diesen Eigenschaftswert verwenden, verschiebt der Touchscreen -Benutzer dieses Element oder das Bild nicht in eine andere Richtung mit Ausnahme der rechten Seite.
Diese Ausgabe wird so bereitgestellt, damit Sie möglicherweise den Wert „Pan-Right“ kennenlernen und die Bildlaufleiste sehen, die darauf hinweist, dass sie nur in die richtige Richtung wandert. Das Bild bewegt sich in diese Richtung, wenn der Touchscreen -Benutzer es bewegt und nur auf die rechte Seite bewegt und nicht in eine andere Richtung bewegt. Wenn der Touchscreen -Benutzer dies verwendet.
Abschluss
Der Zweck des Schreibens dieses Leitfadens besteht darin, Ihnen ein klares Konzept der Eigenschaft „Touch-Action“ in CSS zu geben. Wir haben dieses Konzept im Detail erläutert und Ihnen die verschiedenen Beispiele zur Verfügung gestellt, in denen wir diese Eigenschaft „Touch-Action“ verwendet haben. Wir haben auch die verschiedenen Werte für diese Eigenschaft in jedem Beispiel verwendet. Wir haben diskutiert, dass diese Eigenschaft verwendet wird, um anzugeben, wie ein Touchscreen -Benutzer den Bereich des Elements steuern kann. Wenn wir diese Eigenschaft mit unterschiedlichen Werten verwenden, wird sich das angegebene Element entsprechend dem Wert bewegen, den wir in dieser Eigenschaft „Touch-Action“ festlegen. Wir haben die vier verschiedenen Werte in den vier verschiedenen Beispielen verwendet. Die verbleibenden Werte funktionieren genauso wie ihre Namen, wenn sich der Wert „Pan-up“ nur in Aufwärtsrichtung bewegt. Ich hoffe, Sie lernen diese CSS-Eigenschaft „Touch-Action“ nach dem tiefen Lernen dieses Leitfadens, und es wird für Sie hilfreich sein.