Bild drehen um 360 Grad auf klicken Sie auf
Brauchen Ihre Hilfe, Entwickler,
Ich benutze Bilder als Menü. Ich möchte nur, wenn ich auf das Bild klicken, es drehen 360 Grad, und dann eine andere Seite geöffnet ist.
dies versuche ich.
<style>
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:active {
-webkit-transform: rotate(360deg);
}
</style>
html:
<img class="image" src="img path">
in diesem code-Bild-rotation wird davon abhängen, klicken Sie auf Zeit, und ich möchte, dass user nur einmal klicken, Bild drehen 360 Grad, und die link-Seite anzeigen.
aber das ist nicht was ich will.
Ich bin mit jqueryMobile und phonegap
vielen Dank im Voraus.
InformationsquelleAutor Rohit | 2014-08-22
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie die link-url in das Bild als data-Attribut:
Dann, wenn man mit dem click-Ereignis,
Fügen Sie die animation Klasse.
Fügen Sie eine animationEnd-handler wird ausgelöst, wenn die animation abgeschlossen ist. Verwenden Sie eine() statt (), wie Sie nur wollen diesem handler ausgelöst, sobald.
In der animationEnd-handler entfernen Sie die animation-Klasse (so kann man es Nächstes mal wieder), bekommen Sie die url aus dem data-Attribut, und navigieren Sie dann zu der Seite.
Für die animation-Klasse die ich verwendet habe @cracker spin animation (danke cracker!):
Sie sind herzlich willkommen. Wenn dies für Sie arbeitet, beachten Sie bitte akzeptieren Sie die Antwort, damit Benutzer, die Suche nach diesem, später, wird wissen, die Frage war eine Lösung.
eine weitere Frage habe ich noch Ordner, es enthält html-Dateien.Ich muss link, der die Datei mit main.html. Wie kann ich mit Daten-linkurl ich versuchen, diese : Daten-linkurl="#www/file.html aber es nicht laden, jede Anregung.
wenn es eine externe Seite ist, brauchen Sie nicht das # - Zeichen, nur die relative Adresse, z.B. 'filename.html' oder wenn es in einem Unterordner 'foldername/filename.html'
es gibt mir Fehler beim Laden der Seite
InformationsquelleAutor ezanker
müssen Sie versuchen, mit
ODER
DEMO1
DEMO2
ist der hover-Effekt funktioniert in Handys.weil am Ende seine eine mobile app. Also ich brauche die Lösung nach. Danke.
warum versuchen Sie nicht einmal, und lassen Sie mich wissen, oder nicht funktioniert!!
danke cracker für Ihre wertvollen inputs.
InformationsquelleAutor cracker
probieren Sie es aus:
Ihnen nicht gehören webkit-option (
-webkit-*
) intransition
.Ihnen nicht gehören, ein nicht-webkit-option in
transform
.weil der, dass, egal welchen browser Sie verwenden, etwas fehlte (
transform
odertransition
), und daher der code hat nicht funktioniert, auf jedem browser.Bearbeiten: ich merkte, es war nicht das, was Sie baten. Ich glaube nicht, dass es getan werden kann, mit CSS. Wenn Sie möchten, können Sie es mit jQuery:
.addClass funktioniert nicht jede Anregung.
da Omar, der, dass die Terroristen (Sorry, ich bin Israeli, lebt unter Feuer scinse war ich 8, also kann ich nicht nett zu ihm), so verändert sich der code ein (Sie sehen es in der edit-log). Ich befestigte ihn wieder.
InformationsquelleAutor GINCHER
HTML
CSS
JavaScript
InformationsquelleAutor Imagine Breaker