jQuery benutzerdefinierter Lupeneffekt
|
In diesem Artikelbeispiel wird der spezifische Code des benutzerdefinierten Lupeneffekts von jQuery zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Definition des jQuery-Plugins:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<script src="js/jquery3.6.0.js"></script>
<style type="text/css">
div{
Breite: 200px;
Höhe: 200px;
}
</Stil>
</Kopf>
<Text>
<div></div>
<div></div>
<Skript>
// 1. jQuery-Plugin, definiert auf Basis von jQuery.fn // 2. Lösung von Namenskonflikten // 3. Durchlaufe jedes Element im jQuery-Objekt // 4. Gib in der Funktion jQuery (dieses) zurück
(Funktion($){
$.fn.extend({
Zufallsfarbe:Funktion(){
// dies bezieht sich auf das Pseudoarray, das aus allen Elementen besteht, die wir mit der Funktion $selector random(){ ausgewählt haben.
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
gibt „rgb(,,+ r + ',,+ g + ',,+ b + ')“ zurück;
}
dies.jedes(Funktion(Index){
$(diese).css({
Hintergrundfarbe: zufällig()
})
})
gib dies zurück;
}
})
})(jQuery);
$('div').randomColor();
</Skript>
</body>
</html>
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
*{
Rand: 0;
Polsterung: 0;
}
.Lupe .links{
Breite: 240px;
Höhe: 150px;
schweben: links;
Position: relativ;
}
.Lupe .links img{
Breite: 240px;
Höhe: 150px;
}
.Lupe .links .Maske{
Breite: 100 %;
Höhe: 100%;
Position: absolut;
links: 0;
oben: 0;
Hintergrundfarbe: schwarz;
Deckkraft: 0,4;
}
.Magnifier .float{
Breite: 50px;
Höhe: 50px;
Hintergrund: Pink;
Deckkraft: 0,5;
Position: absolut;
links: 0;
oben: 0;
}
.Lupe .rechts{
Höhe: 200px;
Breite: 200px;
Hintergrundbild: URL (Bild/2.jpg);
schweben: links;
Rand links: 50px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Lupe">
<div Klasse="links">
<img src="./img/2.jpg" >
<div Klasse="float">
</div>
<div Klasse="Maske"></div>
</div>
<div Klasse="rechts"></div>
</div>
<script src="js/jquery3.6.0.js"></script>
<Skript>
(Funktion($){
$.fn.extend({
Lupe:Funktion(){
dies.jedes(Funktion(){
var das=dies;
$('.left',this).mousemove(Funktion (evt){
var x=evt.offsetX;
var y=evt.offsetY;
var float=$('.float',dies);
x=x-float.Breite/2;
y=y-float.höhe/2;
wenn(x<0){
x=0;
}
wenn(y<0){
y=0;
}
wenn(x > $(this).width()-float.width()){
x = $(diese).width()-float.width();
}
wenn(y > $(this).height()-float.height()){
y = $(diese).höhe()-float.höhe();
}
float.css({
links:x,
oben:y
});
$('.richtig',das).css({
Hintergrundposition: x*-4+'px' + y*-4+'px'
})
}).mouseover(Funktion(){
}).mouseout(Funktion(){
})
});
}
})
})(jQuery)
$('.magnifier').magnifier();
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Beheben von Problemen mit impliziter MySQL-Konvertierung
Artikel empfehlen
Einige etwas komplexere Verwendungsbeispielcodes in MySQL
Vorwort Ich glaube, dass die Syntax von MySQL nic...
Beispielcode für die Verwendung von CSS cross-fade() zum Erzielen eines halbtransparenten Hintergrundbildeffekts
1. Anforderungsbeschreibung Bei einem bestimmten ...
Bootstrap3.0-Studiennotizentabelle bezogen auf
In diesem Artikel werden hauptsächlich Tabellen e...
Detaillierte Erläuterung der Vue3-Kapselungsfunktion für Nachrichtenaufforderungsinstanzen
Inhaltsverzeichnis Vue3-Kapselungsnachrichten-Ein...
Tiefgreifendes Verständnis der dynamischen und asynchronen Komponenten von Vue
1. Dynamische Komponenten <!DOCTYPE html> &...
Frage zur Webseitenerstellung: Bilddateipfad
Dieser Artikel stammt ursprünglich von 123WORDPRE...
Detaillierte Erläuterung der Verwendung von Redux bei der nativen WeChat-Applet-Entwicklung
Prämisse In komplexen Szenarien müssen große Date...
Detaillierte Erklärung des Unterschieds zwischen run/cmd/entrypoint in Docker
In Dockerfile können run, cmd und entrypoint zum ...
Detaillierte Erläuterung der Selbstimplementierung von Dispatch und Broadcast (Dispatch und Broadcast) durch Vue
Zu lösendes Problem Hauptsächlich für die ebenenü...
Detaillierte Schritte zum Starten des Django-Projekts mit nginx+uwsgi
Wenn wir ein Webprojekt mit Django entwickeln, wi...
Lösung für unvollständige Textanzeige im El-Tree
Inhaltsverzeichnis Methode 1: Der einfachste Weg,...
Diskussion zu den Themen Bildschaltflächenübermittlung und wiederholte Formularübermittlung
In vielen Fällen wird die Schaltfläche „Senden“ du...
Docker erstellt eine Jenkins+Maven-Plattform zum Erstellen und Bereitstellen von Code
Inhaltsverzeichnis Grundlegende Konzepte von Dock...
MySQL Serie 12 Backup und Wiederherstellung
Inhaltsverzeichnis Tutorial-Reihe 1. Beschreibung...
Vollständige Schritte zum Klonen von CentOS und zur gemeinsamen Nutzung virtueller Linux-Maschinen
Vorwort Wenn ein Linux vollständig eingerichtet i...