Heim > Artikel > Web-Frontend > Jquery-Bild drehen und vergrößern
Jquery-Bild drehen und vergrößern
- 王林Original
- 2023-05-12 09:45:06561Durchsuche
Mit der Weiterentwicklung der Internettechnologie wird Webdesign immer kreativer. Im Design ist es oft notwendig, Bildrotations- und Vergrößerungseffekte zu verwenden, um die visuelle Wirkung der Seite zu verstärken. Dies ist auch ein Effekt, der den meisten Designern sehr gefällt. Daher stellen wir in diesem Artikel vor, wie man Bilder mit jQuery dreht und vergrößert.
1. Bildrotationseffekt erzielen
Bevor wir den Rotationseffekt realisieren, müssen wir zunächst ein gewisses Verständnis des jQuery.rotate.js-Plug-Ins haben. Bei diesem Plug-in handelt es sich um eine auf jQuery basierende JavaScript-Bibliothek, mit der Bildrotationseffekte erzielt werden können.
Das Folgende ist der Code zum Erzielen des Rotationseffekts:
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery旋转图片</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryrotate/2.3/jqueryrotate.min.js"></script>
<style type="text/css">
.image {
margin: 20px auto;
width: 200px;
height: 200px;
}
.image img {
border: 1px solid #ddd;
}
.image .rotate {
margin-top: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// 绑定旋转按钮的事件
$('.rotate').click(function(){
$('.image img').rotate({
angle: 45,
animateTo: 90
});
});
});
</script>
</head>
<body>
<div class="image">
<img src="image.jpg" alt="image" />
<div class="rotate">
<input type="button" value="旋转图片" />
</div>
</div>
</body>
</html>Unter anderem können wir durch Einführung der drei Dateien jQuery.js, jQuery-ui.js und jQuery-rotate.js den Rotationseffekt des Bildes erzielen. Die spezifische Implementierungsmethode lautet wie folgt:
1. Fügen Sie Links zu den Dateien jQuery.js, jQuery-ui.js und jQuery-rotate.js im Head-Tag hinzu.
2. Definieren Sie verwandte Stile im Stil-Tag, einschließlich der Stile von Bildern und Drehschaltflächen.
3. Definieren Sie den relevanten HTML-Inhalt des Bildes im Body-Tag, einschließlich des Spin-Buttons und des Bildcontainers.
4. Implementieren Sie die Bildrotation im Skript-Tag. Die spezifische Implementierungsmethode ist wie folgt:
(1) Binden Sie das Ereignis der Rotationsschaltfläche.
(2)Verwenden Sie das Plug-in jQuery.rotate.js, um einen Bildrotationseffekt zu erzielen.
Im obigen Code verwenden wir das Plug-in jQuery.rotate.js, um das Bild zu drehen. Unter diesen repräsentiert die .rotate-Klasse die Rotationsschaltfläche und die .image-Klasse den Bildcontainer. Wenn wir auf die Schaltfläche „Drehen“ klicken, verwenden wir die Funktion .rotate() und ihre Parameter, um das Bild zu drehen. Unter diesen stellt der Winkelparameter den Drehwinkel dar, und der animateTo-Parameter stellt die Zeit in Millisekunden dar, die die Drehung benötigt, um den Zielwinkel zu erreichen.
2. Bildvergrößerungseffekt erzielen
Neben dem Rotationseffekt ist auch der Bildvergrößerungseffekt sehr beliebt. Als Nächstes stellen wir vor, wie Sie mit jQuery den Vergrößerungseffekt von Bildern erzielen.
1. Verwenden Sie die CSS3-Transformation, um einen Bildvergrößerungseffekt zu erzielen.
Das CSS3-Transformationsattribut kann einen einfachen Bildvergrößerungseffekt erzielen. Wir können die animate()-Funktion von jQuery verwenden, um dynamische Änderungen im CSS3-Transformationsattribut zu erreichen. Das Folgende ist der Code zum Erzielen des Zoomeffekts:
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery放大图片</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
.image {
margin: 20px auto;
width: 200px;
position: relative;
}
.image img {
border: 1px solid #ddd;
}
.image .zoom {
width: 50px;
height: 50px;
background-color: #fff;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid #ddd;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// 绑定放大按钮的事件
$('.zoom').click(function(){
$('.image img').animate({
height: '400px'
}, 500);
});
});
</script>
</head>
<body>
<div class="image">
<img src="image.jpg" alt="image" />
<div class="zoom"></div>
</div>
</body>
</html>Unter anderem müssen wir dem Bildcontainer einen Zoomcontainer hinzufügen, um die Zoomschaltfläche zu speichern. Die spezifische Implementierungsmethode lautet wie folgt:
1. Fügen Sie im Head-Tag einen Link zur Datei jQuery.js hinzu.
2. Definieren Sie verwandte Stile im Stil-Tag, einschließlich der Stile von Bildern und Vergrößerungsschaltflächen.
3. Definieren Sie den relevanten HTML-Inhalt des Bildes im Body-Tag, einschließlich der Vergrößerungsschaltfläche und des Bildcontainers.
4. Implementieren Sie die Bildvergrößerung im Skript-Tag. Die spezifische Implementierungsmethode ist wie folgt:
(1) Binden Sie das Ereignis der Vergrößerungsschaltfläche.
(2) Verwenden Sie die animate()-Funktion von jQuery, um hochdynamische Änderungen in Bildern zu erzielen.
Im obigen Code verwenden wir die Funktion .zoom(), um die Zoom-Taste zu binden. Wenn auf die Schaltfläche geklickt wird, verwenden wir die Funktion animate(), um die Bildhöhe von ursprünglich 200 Pixel auf 400 Pixel zu ändern. Die Animationseffektzeit beträgt 500 ms.
2. Verwenden Sie jQuery, um das Bild zu vergrößern.
Wenn Sie einen komplexeren Vergrößerungseffekt erzielen müssen, können wir jQuery-bezogene Plug-Ins verwenden. Das Folgende ist der Code zum Erzielen des Zoomeffekts:
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery放大图片</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-zoom/1.8.13/jquery.zoom.min.js"></script>
<style type="text/css">
.image {
margin: 20px auto;
width: 200px;
height: 200px;
}
.image img {
border: 1px solid #ddd;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// 绑定放大按钮的事件
$('.image img').zoom({
url: 'image-big.jpg'
});
});
</script>
</head>
<body>
<div class="image">
<img src="image-small.jpg" alt="image" />
</div>
</body>
</html>Unter anderem verwenden wir das Plug-In jquery-zoom.js, um das Bild zu vergrößern. Die spezifische Implementierungsmethode ist wie folgt:
1. Fügen Sie Links zu den Dateien jQuery.js und jquery-zoom.js im Head-Tag hinzu.
2. Definieren Sie verwandte Stile im Style-Tag, einschließlich des Stils des Bildes.
3. Definieren Sie den relevanten HTML-Inhalt des Bildes im Body-Tag.
4. Verwenden Sie die Funktion .zoom() im Skript-Tag, um das Bild zu vergrößern. Unter diesen repräsentiert der URL-Parameter den vergrößerten Bildpfad.
Im obigen Code verwenden wir die Funktion .zoom(), um den Zoomeffekt des Bildes zu erzielen. Beim Scrollen mit dem Mausrad verändert sich das Bild dynamisch und es entsteht ein Vergrößerungseffekt. Es ist zu beachten, dass das Bild ein hochauflösendes Bild sein muss, da sonst die Bildqualität nach der Vergrößerung unscharf wird.
3. Erkennen Sie den Rotations- und Vergrößerungseffekt des Bildes.
Zusätzlich zur separaten Realisierung des Rotations- und Vergrößerungseffekts des Bildes ist es manchmal notwendig, den Rotations- und Vergrößerungseffekt des Bildes gleichzeitig zu realisieren. An diesem Punkt können wir die beiden oben genannten Effekte kombinieren. Der Code lautet wie folgt:
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery旋转放大图片</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryrotate/2.3/jqueryrotate.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-zoom/1.8.13/jquery.zoom.min.js"></script>
<style type="text/css">
.image {
margin: 20px auto;
width: 200px;
height: 200px;
position: relative;
}
.image img {
border: 1px solid #ddd;
}
.image .zoom {
width: 50px;
height: 50px;
background-color: #fff;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid #ddd;
cursor: pointer;
}
.image .rotate {
width: 50px;
height: 50px;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
border: 1px solid #ddd;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// 绑定放大按钮的事件
$('.image img').zoom({
url: 'image-big.jpg'
});
// 绑定旋转按钮的事件
$('.rotate').click(function(){
$('.image img').rotate({
angle: 45,
animateTo: 90
});
});
});
</script>
</head>
<body>
<div class="image">
<img src="image-small.jpg" alt="image" />
<div class="zoom"></div>
<div class="rotate"></div>
</div>
</body>
</html>Im obigen Code kombinieren wir die beiden oben genannten Effekte. Die spezifische Implementierungsmethode ist wie folgt:
1. Fügen Sie Links zu den vier Dateien jQuery.js, jquery-ui.js, jquery-rotate.js und jquery-zoom.js im Head-Tag hinzu.
2. Definieren Sie verwandte Stile im Stil-Tag, einschließlich der Stile von Bildern, Vergrößerungsschaltflächen und Rotationsschaltflächen.
3. Definieren Sie den relevanten HTML-Inhalt des Bildes im Body-Tag, einschließlich Zoom- und Drehschaltflächen und Bildcontainern.
4. Implementieren Sie den Rotations- und Vergrößerungseffekt des Bildes im Skript-Tag. Die spezifische Implementierungsmethode ist wie folgt:
(1) Verwenden Sie die Funktion .zoom(), um den Vergrößerungseffekt des Bildes zu erzielen.
(2) Binden Sie das .click-Ereignis des Spin-Buttons.
(3) Verwenden Sie die Funktion .rotate(), um den Rotationseffekt des Bildes zu erzielen.
Im obigen Code verwenden wir die Plug-Ins jQuery.rotate.js und jquery-zoom.js, um die Bildrotations- und Vergrößerungseffekte zu erzielen. Durch die Bindung des .click-Ereignisses der Schaltfläche können wir das Bild steuern. Der Gesamteffekt ist sehr glatt und kann den visuellen Effekt der Seite verbessern.
Zusammenfassung:
Im Webdesign ist das Erzielen von Bildrotations- und Vergrößerungseffekten zu einer sehr grundlegenden Anforderung geworden. Durch die Verwendung von jQuery können wir Bildrotations- und Vergrößerungseffekte erzielen, um den visuellen Effekt der Seite zu verbessern. In diesem Artikel stellen wir drei Implementierungsmethoden vor und geben den entsprechenden Code an. Ich glaube, dass Leser durch das Studium dieses Artikels bereits beherrschen können, wie man jQuery verwendet, um Bildrotations- und Vergrößerungseffekte zu erzielen.
Das obige ist der detaillierte Inhalt vonJquery-Bild drehen und vergrößern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Problem beim Übergeben von Werten von der übergeordneten Komponente an die untergeordneten Komponenten-Echarts in Vue
- Einige Gedanken zu React diese Bindung
- Django verwendet eine Anfrage, um die vom Browser gesendeten Parameter abzurufen
- DOM-Operation in JQuery – Wrap
- Erläuterung verwandter Inhalte von Prototyp und Prototypenkette