Web-Frontend
HTML-Tutorial
Wie erreicht man ein nahtloses Scrollen von Bildern auf mobilen Endgeräten? (Code)
Wie erreicht man ein nahtloses Scrollen von Bildern auf mobilen Endgeräten? (Code)
In diesem Artikel erfahren Sie, wie Sie ein nahtloses Scrollen von Bildern auf dem mobilen Endgerät erreichen können. (Code), es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Document</title>
<script type="text/javascript">
//获取html
var html = document.documentElement;
//设置html的字体大小 = 可视区的宽度 / 15
html.style.fontSize = html.clientWidth / 15 + 'px';
//阻止pc和浏览器默认行为。
document.addEventListener（'touchstart',function（ev）{
ev.preventDefault（）；
}）；
</script>
<style>
body{
margin: 0;
}
.wrap{
height: 4.68rem;
position: relative;
}
.list{
padding: 0;
margin: 0;
width:400%;
position: absolute;
top:0;
left:0;
list-style: none;
}
.list li{
float: left;
width:15rem;
}
.list img{
width:15rem;
display: block;
}
nav{
width:15rem;
height: 10px;
position: absolute;
bottom:5px;
z-index: 1;
text-align:center;
}
nav a{
width:15px;
height: 15px;
display: inline-block;
background: red;
border-radius:50%;
vertical-align:top;
}
nav a.active{
background:#fff;
}
</style>
</head>
<body>
<section>
<ul>
<li>
<img src="img/img.jpg" alt="" />
</li>
<li>
<img src="img/img2.jpg" alt="" />
</li>
<li>
<img src="img/img3.jpg" alt="" />
</li>
<li>
<img src="img/img4.jpg" alt="" />
</li>
</ul>
<nav>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</nav>
</section>
<script type="text/javascript">
var wrap=document.getElementsByClassName（"wrap"）[0],
list=document.getElementsByClassName（"list"）[0],
disX=0,
listL=0,
n=0,
w=wrap.clientWidth,
s=0,
timer=0;
a=document.getElementsByTagName（"a"）；
list.addEventListener（"touchstart",start）；
list.addEventListener（"touchmove",move）；
list.addEventListener（"touchend",end）；
list.innerHTML+=list.innerHTML;
len=list.children.length;
console.log（len）；
list.style.width=w*len+"px";
function start（ev）{
clearInterval（timer）；
var e=ev.changedTouches[0];
disX=e.pageX;
list.style.transition="none";
var num=Math.round（list.offsetLeft/w）；
list.style.left=num*w+"px";
if（num==0）{
num=a.length;
list.style.left=-num*w+"px";
}
if（-num==len-1）{
num=a.length-1;
list.style.left=-num*w+"px";
}
listL=this.offsetLeft;
}
function move（ev）{
var e=ev.changedTouches[0];
list.style.left=（e.pageX-disX）+listL+"px";
}
function end（）{
var num=Math.round（list.offsetLeft/w）；
console.log（num）
list.style.transition="0.5s";
list.style.left=num*w+"px";
a[n].className="";
a[（-num）%a.length].className="active";
n=（-num）%a.length;
timer=setInterval（function（）{
inn（）；
},1000）
s=-num;
}
timer=setInterval（function（）{
inn（）；
},1000）
function inn（）{
s++;
list.style.left=-s*w+"px";
list.style.transition="0.5s";
console.log（s）；
if（s>len-1）{
s=a.length-1;
list.style.transition="none";
list.style.left=-s*w+"px";
console.log（list.style.left）；
setTimeout（function（）{
list.style.transition="0.5s";
s++;
list.style.left=-s*w+"px";
a[n].className="";
a[s%a.length].className="active";
n=s%a.length;
},30）
}
a[n].className="";
a[s%a.length].className="active";
n=s%a.length;
}
</script>
</body>
</html>Wie erreicht man oben ein nahtloses Scrollen von mobilen Bildern? (Code) Vollständige Einführung. Wenn Sie mehr über HTML-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWie erreicht man ein nahtloses Scrollen von Bildern auf mobilen Endgeräten? (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Tipps und Methoden, um mit CSS einen nahtlosen Scrolleffekt zu erzielen
Oct 25, 2023 pm 12:31 PM
CSS-Techniken und -Methoden zum Erzielen nahtloser Scrolleffekte erfordern spezifische Codebeispiele. Mit der Entwicklung der Internettechnologie werden nahtlose Scrolleffekte im Webdesign häufig verwendet. Es kann Benutzern ein besseres Surferlebnis bieten und auch die Dynamik und visuelle Wirkung von Webseiten erhöhen. In diesem Artikel werde ich mehrere häufig verwendete CSS-Techniken und -Methoden vorstellen, um nahtlose Scrolleffekte zu erzielen, und spezifische Codebeispiele bereitstellen. Verwenden Sie CSS-Animationen, um einen nahtlosen Scroll-Effekt zu erzielen. CSS-Animationen sind eine einfache und effiziente Möglichkeit, einen nahtlosen Scroll-Effekt zu erzielen. Wir können @key verwenden
So erstellen Sie mit CSS einen nahtlosen Lauftext-Karusselleffekt
Oct 25, 2023 am 10:24 AM
Für die Verwendung von CSS zum Erstellen eines nahtlosen Textkarusselleffekts sind spezifische Codebeispiele erforderlich. Mit der Entwicklung des Internets und den steigenden Anforderungen von Designern an die Benutzererfahrung ist der Textkarusselleffekt auf Websites zu einer der häufigsten Darstellungsformen geworden. Textkarussells können die Aufmerksamkeit der Nutzer erregen, die Dynamik und Vitalität der Seite steigern und die Aufmerksamkeit der Nutzer auf den Inhalt steigern. In diesem Artikel zeige ich Ihnen, wie Sie mit CSS einen nahtlosen Karusselleffekt für Lauftexte erstellen, und stelle Ihnen konkrete Codebeispiele zur Verfügung. Bevor ich einen nahtlosen Lauftext-Karusselleffekt erstelle, habe ich
So erzielen Sie mit Vue nahtlose Scrolling-Werbeeffekte
Sep 21, 2023 am 11:24 AM
So implementieren Sie mit Vue Seamless-Scrolling-Werbeeffekte Im modernen Webdesign erfreuen sich Seamless-Scrolling-Werbeeffekte großer Beliebtheit. Dieser Spezialeffekt kann die Aufmerksamkeit der Nutzer erregen und mehrere Werbeinhalte gleichzeitig anzeigen. Vue ist ein beliebtes JavaScript-Framework, das eine einfache und zuverlässige Möglichkeit bietet, diesen Effekt zu erzielen. In diesem Artikel erfahren Sie, wie Sie mit Vue einen nahtlosen Scroll-Anzeigeneffekt erstellen und spezifische Codebeispiele bereitstellen. Schritt 1: Erstellen Sie eine Vue-Komponente. Zuerst müssen wir eine Vue-Komponente zur Implementierung erstellen
Methoden und Techniken zum Erzielen nahtloser Bildlaufnachrichten durch reines CSS
Oct 19, 2023 am 10:46 AM
Methoden und Techniken zum Erzielen nahtloser Bildlaufnachrichten durch reines CSS Mit der kontinuierlichen Weiterentwicklung der Webtechnologie ist die Erzielung einiger cooler Effekte durch CSS zum Ziel von Front-End-Entwicklern geworden. In diesem Artikel werden Methoden und Techniken vorgestellt, mit denen Sie mithilfe von reinem CSS nahtlose Bildlaufnachrichten erzielen können, und es werden spezifische Codebeispiele bereitgestellt. 1. Implementierungsideen Im Allgemeinen gibt es zwei Ideen für die Implementierung nahtloser Bildlauf-Nachrichteneffekte: die Verwendung von CSS-Animationen und die Verwendung des Transformationsattributs von CSS3. Im Folgenden werden wir diese beiden Methoden einzeln vorstellen. 1. Verwenden Sie CSS-Animation C
So verwenden Sie CSS, um einen nahtlosen Lauftext-Anzeigeeffekt zu erstellen.
Oct 21, 2023 am 09:10 AM
So erstellen Sie mit CSS einen nahtlosen Lauftext-Anzeigeeffekt. Im Webdesign sorgt der nahtlose Lauftext-Anzeigeeffekt für ein flüssigeres und attraktiveres Benutzererlebnis. Dieser Effekt wird normalerweise in Szenen wie Karussells und scrollenden Nachrichten verwendet. In diesem Artikel werden spezifische Schritte zur Verwendung von CSS vorgestellt, um nahtlose Anzeigeeffekte für Lauftexte zu erzielen, und relevante Codebeispiele bereitgestellt. Schritt 1: Erstellen Sie die HTML-Struktur. Zuerst müssen wir ein Containerelement erstellen, das den Lauftext enthält. Es kann div, ul oder ein anderes HTM sein
So erstellen Sie mit CSS einen nahtlosen Karusselleffekt für Bildlaufbilder
Oct 20, 2023 pm 03:37 PM
So erstellen Sie mit CSS einen nahtlosen Bildkarusselleffekt Mit der Entwicklung des Internets und dem Streben der Menschen nach Ästhetik sind Bildkarussells zu einem der häufigsten Elemente im Webdesign geworden. Der nahtlose Bildkarusselleffekt kann die Aufmerksamkeit der Benutzer erregen und die Interaktivität und den visuellen Effekt der Seite erhöhen. In diesem Artikel stellen wir vor, wie Sie mit CSS einen nahtlosen Karusselleffekt für Bildlaufbilder erzielen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine grundlegende HTML-Struktur vorbereiten. Wir können einen Container verwenden, der mehrere Bilder enthält, und erstellen
So erreichen Sie nahtlos scrollende Nachrichtenbenachrichtigungen mit HTML, CSS und jQuery
Oct 25, 2023 am 11:55 AM
So verwenden Sie HTML, CSS und jQuery, um nahtlos scrollende Nachrichtenbenachrichtigungen zu implementieren. In der heutigen Zeit der Informationsexplosion sind Nachrichtenbenachrichtigungen zu einer der wichtigsten Möglichkeiten für Menschen geworden, sofortige Informationen zu erhalten. Nachrichtenbenachrichtigungsleisten auf Webseiten können die Aufmerksamkeit der Benutzer erregen und wichtige und interessante Inhalte bereitstellen. In diesem Artikel wird anhand spezifischer Codebeispiele erläutert, wie Sie mithilfe von HTML, CSS und jQuery eine nahtlos scrollende Nachrichtenbenachrichtigungsleiste implementieren. 1. HTML-Struktur: In der HTML-Datei müssen wir zunächst eine erstellen
So erstellen Sie mithilfe von CSS einen nahtlosen Bildlaufleisteneffekt
Oct 16, 2023 am 08:09 AM
So erstellen Sie mit CSS eine nahtlos scrollende Bildanzeigeleiste Mit der Entwicklung des Internets ist die Bildanzeige zu einem unverzichtbaren Bestandteil vieler Website-Designs geworden. Der nahtlose Bildlaufleisteneffekt kann die Aufmerksamkeit der Benutzer erregen und den visuellen Effekt und die Benutzererfahrung der Website verbessern. In diesem Artikel werde ich Ihnen zeigen, wie Sie mit CSS einen nahtlosen Bildlaufeffekt in der Anzeigeleiste erzielen, und konkrete Codebeispiele bereitstellen. Der Effekt des nahtlosen Scrollens der Bildanzeigeleiste hängt hauptsächlich von den Animationseigenschaften und dem Layout von CSS ab. Hier sind die Schritte, um diesen Effekt zu erzielen
