Web-Frontend
js-Tutorial
3D-Drag-and-Drop-Umblättereffektcode, implementiert durch JS_Javascript-Kenntnisse
3D-Drag-and-Drop-Umblättereffektcode, implementiert durch JS_Javascript-Kenntnisse
Das Beispiel in diesem Artikel beschreibt den von JS implementierten 3D-Drag-and-Drop-Umblättereffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Ich habe zuvor einen sehr beliebten Beitrag gesehen und der durch Ziehen erzielte Umblättereffekt war sehr kreativ und gefiel mir sehr gut, sodass ich auf die Idee kam, ihn auf meine eigene Weise nachzuahmen. Dank des ursprünglichen Autors für seine Kreativität ist das Ergebnis das gleiche, aber der Prozess ist anders. Der Code wird als Referenz bereitgestellt.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/
Der spezifische Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拽翻页</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px; overflow:hidden;}
img{border:0;}
li{list-style:none;}
#drag{
width:682px;
color:#fff;
position:relative;
margin:50px auto 0 auto;
font-family:"Microsoft YaHei", "宋体";
}
#drag ul{
}
#drag ul li{
text-align:right;
height:30px;
line-height:30px;
overflow:hidden;
vertical-align:middle;
font-size:14px;
border-bottom:1px dashed #fff;
}
#drag ul li span{
float:right;
}
#drag ul li a{
float:left;
color:#fff;
text-decoration:none;
}
#drag div{
width:600px;
height:350px;
padding:40px;
background:#77521d;
cursor:e-resize;
border:1px solid #999;
position:absolute;
left:0;
top:0;
}
#drag div p{
width:100%;
padding-bottom:20px;
text-align:center;
position:absolute;
bottom:0;
left:0;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDrag=document.getElementById('drag');
var aDiv=oDrag.getElementsByTagName('div');
var aLink=oDrag.getElementsByTagName('a');
var i=0;
for(i=0;i<aDiv.length;i++)
{
aDiv[i].style.zIndex=(i+1);
aDiv[i].innerHTML+='<p>第 '+(i+1)+'/'+aDiv.length+' 页 提示：左右拖拽翻页</p>';
aDiv[i].onmousedown=drag;
}
for(i=0;i<aLink.length;i++)
{
aLink[i].onmousedown=function(ev)
{
var oEvent=ev||event;
oEvent.stopPropagation?oEvent.stopPropagation():oEvent.cancelBubble=true;
};
}
};
function drag(ev)
{
var obj=this;
var mouseStart=[];
var objStart=[];
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
objStart.x=this.offsetLeft;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+objStart.x;
var t=oEvent.clientY-mouseStart.y+objStart.y;
obj.style.left=l+'px';
return false;
};
document.onmouseup=function()
{
document.onmousemove=document.onmouseup=null;
startMove(obj);
};
return false;
}
function startMove(obj)
{
var oDrag=document.getElementById('drag');
var aDiv=oDrag.getElementsByTagName('div');
var iSpeed=0;
obj.timer=setInterval(function(){
obj.onmousedown=null;
obj.offsetLeft>=0?iSpeed+=10:iSpeed-=10;
var l=obj.offsetLeft+iSpeed;
if(l>obj.offsetWidth)
{
l=obj.offsetWidth;
moveDirection(iSpeed);
}
else if(l<-obj.offsetWidth)
{
l=-obj.offsetWidth;
moveDirection(iSpeed);
}
obj.style.left=l+'px';
},30);
function moveDirection(iSpeed)
{
for(i=0;i<aDiv.length;i++)
{
aDiv[i].style.zIndex=parseInt(aDiv[i].style.zIndex)+1;
if(aDiv[i]==obj)
{
obj.style.zIndex=parseInt(obj.style.zIndex)-aDiv.length;
}
}
clearInterval(obj.timer);
t=setInterval(function(){
obj.onmousedown=null;
var l=obj.offsetLeft-iSpeed;
if((iSpeed<0 && l>0) || (iSpeed>0 && l<0))
{
l=0;
clearInterval(t);
obj.onmousedown=drag;
}
obj.style.left=l+'px';
},30);
}
}
</script>
</head>
<body>
<div id="drag">
<div>
<ul>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">啊！爱人</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">宁静温泉</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">你的样子</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1980</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1990</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲2000</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">亚细亚的孤儿</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">伴侣</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">童年</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱的箴言</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱人同志</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">思念</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">母亲</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">是否</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">牧童</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">青春舞曲</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">蒲公英</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">未来的主人翁</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">如今才是唯一</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">暗恋</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">弹唱词</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">飞车</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">滚滚红尘</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">光阴的故事</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">之乎者也</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">现象七十二变</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">乡愁四韵</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">穿过你的黑发我的手</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">大兵歌</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">歌</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">黄色面孔</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">台北红玫瑰</a></li>
<li><span>2009-4-9 12:35</span><a target="_blank" href="#">我所不能了解的事</a></li>
</ul>
</div>
</div>
</body>
</html>Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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
Warum ist Gaussian Splatting beim autonomen Fahren so beliebt, dass NeRF allmählich aufgegeben wird?
Jan 17, 2024 pm 02:57 PM
Oben geschrieben und persönliches Verständnis des Autors. Dreidimensionales Gaussplatting (3DGS) ist eine transformative Technologie, die in den letzten Jahren in den Bereichen explizite Strahlungsfelder und Computergrafik entstanden ist. Diese innovative Methode zeichnet sich durch die Verwendung von Millionen von 3D-Gaußkurven aus, was sich stark von der Neural Radiation Field (NeRF)-Methode unterscheidet, die hauptsächlich ein implizites koordinatenbasiertes Modell verwendet, um räumliche Koordinaten auf Pixelwerte abzubilden. Mit seiner expliziten Szenendarstellung und differenzierbaren Rendering-Algorithmen garantiert 3DGS nicht nur Echtzeit-Rendering-Fähigkeiten, sondern führt auch ein beispielloses Maß an Kontrolle und Szenenbearbeitung ein. Dies positioniert 3DGS als potenziellen Game-Changer für die 3D-Rekonstruktion und -Darstellung der nächsten Generation. Zu diesem Zweck geben wir erstmals einen systematischen Überblick über die neuesten Entwicklungen und Anliegen im Bereich 3DGS.
CLIP-BEVFormer: Überwacht explizit die BEVFormer-Struktur, um die Leistung der Long-Tail-Erkennung zu verbessern
Mar 26, 2024 pm 12:41 PM
Oben geschrieben und das persönliche Verständnis des Autors: Derzeit spielt das Wahrnehmungsmodul im gesamten autonomen Fahrsystem eine entscheidende Rolle Das Steuermodul im autonomen Fahrsystem trifft zeitnahe und korrekte Urteile und Verhaltensentscheidungen. Derzeit sind Autos mit autonomen Fahrfunktionen in der Regel mit einer Vielzahl von Dateninformationssensoren ausgestattet, darunter Rundumsichtkamerasensoren, Lidar-Sensoren und Millimeterwellenradarsensoren, um Informationen in verschiedenen Modalitäten zu sammeln und so genaue Wahrnehmungsaufgaben zu erfüllen. Der auf reinem Sehen basierende BEV-Wahrnehmungsalgorithmus wird von der Industrie aufgrund seiner geringen Hardwarekosten und einfachen Bereitstellung bevorzugt, und seine Ausgabeergebnisse können problemlos auf verschiedene nachgelagerte Aufgaben angewendet werden.
Kamera oder Lidar wählen? Eine aktuelle Übersicht über die Erzielung einer robusten 3D-Objekterkennung
Jan 26, 2024 am 11:18 AM
0. Vorab geschrieben&& Persönliches Verständnis, dass autonome Fahrsysteme auf fortschrittlichen Wahrnehmungs-, Entscheidungs- und Steuerungstechnologien beruhen, indem sie verschiedene Sensoren (wie Kameras, Lidar, Radar usw.) verwenden, um die Umgebung wahrzunehmen, und Algorithmen und Modelle verwenden für Echtzeitanalysen und Entscheidungsfindung. Dies ermöglicht es Fahrzeugen, Verkehrszeichen zu erkennen, andere Fahrzeuge zu erkennen und zu verfolgen, das Verhalten von Fußgängern vorherzusagen usw. und sich so sicher an komplexe Verkehrsumgebungen anzupassen. Diese Technologie erregt derzeit große Aufmerksamkeit und gilt als wichtiger Entwicklungsbereich für die Zukunft des Transportwesens . eins. Aber was autonomes Fahren schwierig macht, ist herauszufinden, wie man dem Auto klarmachen kann, was um es herum passiert. Dies erfordert, dass der dreidimensionale Objekterkennungsalgorithmus im autonomen Fahrsystem Objekte in der Umgebung, einschließlich ihrer Standorte, genau wahrnehmen und beschreiben kann.
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS
Dec 17, 2023 pm 06:55 PM
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen in PHP und JS. Mit der rasanten Entwicklung des Internets und der Technologie ist der Aktienhandel für viele Anleger zu einer wichtigen Möglichkeit geworden. Die Aktienanalyse ist ein wichtiger Teil der Anlegerentscheidung, und Kerzendiagramme werden häufig in der technischen Analyse verwendet. Wenn Sie lernen, wie man Kerzendiagramme mit PHP und JS zeichnet, erhalten Anleger intuitivere Informationen, die ihnen helfen, bessere Entscheidungen zu treffen. Ein Candlestick-Chart ist ein technischer Chart, der Aktienkurse in Form von Candlesticks anzeigt. Es zeigt den Aktienkurs
Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung
Apr 03, 2024 am 11:55 AM
Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert
So erstellen Sie ein Aktien-Candlestick-Diagramm mit PHP und JS
Dec 17, 2023 am 08:08 AM
So verwenden Sie PHP und JS zum Erstellen eines Aktienkerzendiagramms. Ein Aktienkerzendiagramm ist eine gängige technische Analysegrafik auf dem Aktienmarkt. Es hilft Anlegern, Aktien intuitiver zu verstehen, indem es Daten wie den Eröffnungskurs, den Schlusskurs, den Höchstkurs usw niedrigster Preis der Aktie. In diesem Artikel erfahren Sie anhand spezifischer Codebeispiele, wie Sie Aktienkerzendiagramme mit PHP und JS erstellen. 1. Vorbereitung Bevor wir beginnen, müssen wir die folgende Umgebung vorbereiten: 1. Ein Server, auf dem PHP 2. Ein Browser, der HTML5 und Canvas 3 unterstützt
PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen
Dec 18, 2023 pm 03:39 PM
Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine häufig verwendete Methode der technischen Analyse. Sie können den sich ändernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verständnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zunächst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt
Das Neueste von der Universität Oxford! Mickey: 2D-Bildabgleich in 3D SOTA! (CVPR\'24)
Apr 23, 2024 pm 01:20 PM
Projektlink vorne geschrieben: https://nianticlabs.github.io/mickey/ Anhand zweier Bilder kann die Kameraposition zwischen ihnen geschätzt werden, indem die Korrespondenz zwischen den Bildern hergestellt wird. Normalerweise handelt es sich bei diesen Entsprechungen um 2D-zu-2D-Entsprechungen, und unsere geschätzten Posen sind maßstabsunabhängig. Einige Anwendungen, wie z. B. Instant Augmented Reality jederzeit und überall, erfordern eine Posenschätzung von Skalenmetriken und sind daher auf externe Tiefenschätzer angewiesen, um die Skalierung wiederherzustellen. In diesem Artikel wird MicKey vorgeschlagen, ein Keypoint-Matching-Prozess, mit dem metrische Korrespondenzen im 3D-Kameraraum vorhergesagt werden können. Durch das Erlernen des 3D-Koordinatenabgleichs zwischen Bildern können wir auf metrische Relativwerte schließen
