Heim > Web-Frontend > js-Tutorial > Hauptteil

Javascript-Screenshot jQuery-Plug-in imgAreaSelect-Nutzung, detaillierte Erklärung_jquery

WBOY
Freigeben: 2016-05-16 15:02:24
Original
2115 Leute haben es durchsucht

Damit Benutzer persönliche Avatare anpassen können, ist es notwendig, eine Screenshot-Funktion für hochgeladene Bilder bereitzustellen. Derzeit bieten viele Websites, insbesondere SNS-Websites, eine solche Funktion an, was sehr praktisch ist. Es gibt zwei Hauptformen der Implementierung: Flash-Screenshots und Javascript-Screenshots. Beide Methoden haben ihre eigenen Vor- und Nachteile. Sie können sich auf die Avatar-Upload-Funktion im UcHome-Programm beziehen, dies ist jedoch nicht der Fall Das Thema, das ich hier besprechen möchte, ist die Implementierung von Javascript-Screenshots mithilfe des imgAreaSelect-Plugins von jQuery, um die benutzerdefinierte JavaScript-Screenshot-Funktion „Avatar“ zu implementieren.

1. Vorbereitung:
Zwei JS-Dateien
1. jquery.js herunterladen: jquery.js
2. jquery.imgareaselect.js Download: jquery.imgareaselect.js[imgareaselect-0.6.2.zip]

2. Verwenden Sie


function preview(img, selection){ 
var scaleX = 100 / selection.width; 
var scaleY = 100 / selection.height; 
Nach dem Login kopieren



//Dynamischer Avatar Ermittelt die Breite, Höhe, den linken und rechten Rand des aktuell ausgewählten Felds

$('#biuuu + div > img').css({ 
width: Math.round(scaleX * 400) + 'px', 
height: Math.round(scaleY * 300) + 'px', 
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
}); 
} 
Nach dem Login kopieren


//Kleinen Avatar laden

$(document).ready(function () { 
$('<div><img src="biuuu.jpg" style="position: relative;" /></div>') 
.css({ 
float: 'left', 
position: 'relative', 
overflow: 'hidden', 
width: '100px', 
height: '100px' 
}) 
.insertAfter($('#biuuu')); 
}); 
Nach dem Login kopieren



//Erstladung

$(window).load(function () { 
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
}); 
Nach dem Login kopieren


Dritten, rufen Sie
an

<div class="container"> 
<p> 
<img id="biuuu" src="biuuu.jpg" title="biuuu" style="float: left; margin-right: 10px;" /> 
</p> 
</div> 
Nach dem Login kopieren


Durch die Verwendung des obigen Javascript-Screenshots können viele dynamische Funktionen erreicht werden. Das von jQuery bereitgestellte imgAreaSelect-Plugin ist sehr einfach aufzurufen. Weitere verwandte Anwendungen finden Sie unter: imgAreaSelect-Beispiele

Es ist sehr einfach, das jQuery-Plug-in imgAreaSelect zu verwenden, um Javascript-Screenshots zu implementieren. Es handelt sich im Grunde um eine dynamische Bildanzeige, bei der die Position des Quellbilds und die Größe des Auswahlfelds [Breite und Höhe] ermittelt und das Javascript einfach realisiert wird Screenshot-Funktion.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!