suchen

Heim >Web-Frontend >js-Tutorial >So vergrößern Sie Bilder in JavaScript

So vergrößern Sie Bilder in JavaScript

亚连
亚连Original
2018-06-19 16:46:311746Durchsuche

Im Folgenden werde ich Ihnen ein Beispiel für die Verwendung von JavaScript zur Erzielung des Bildvergrößerungseffekts durch Mouseover () vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird

Beispiel Wie unten gezeigt: 

<!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=utf-8" /> 
<title>图片提示</title> 
<!--jQuery --> 
<script src="../jquery.min.js"type="text/javascript"></script> 
<style type="text/css"> 
body{ 
margin:0; 
padding:40px; 
background:#fff; 
font:80% Arial, Helvetica, sans-serif; 
color:#555; 
line-height:180%; 
} 
img{border:none;} 
ul,li{ 
margin:0; 
padding:0; 
} 
li{ 
list-style:none; 
float:left; 
display:inline; 
margin-right:10px; 
border:1px solid #AAAAAA; 
} 
/* tooltip */ 
#tooltip{ 
position:absolute; 
border:1px solid #ccc; 
background:#333; 
padding:2px; 
display:none; 
color:#fff; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var x=1,y=1; 
var myHref; 
$("a[class=tooltip]").mouseover(function(e){//鼠标悬停的时候 
myHref=this.href;//获取大图片 
var $p=$("<p id=&#39;tooltip&#39;><img src=&#39;"+myHref+"&#39;></img></p>");//创建一个p 
$("body").append($p);//把p添加到body中 
$("#tooltip").css({ 
top:e.pageY+y+"px", 
left:e.pageX+x+"px" 
}).show("slow"); 
}).mouseout(function(e){//鼠标移开的时候 
$("#tooltip").remove(); 
}).mousemove(function(e){//鼠标移动的时候 
$("#tooltip").css({ 
top:e.pageY+y+"px", 
left:e.pageX+x+"px" 
}).show("slow"); 
}) 
}); 
</script> 
</head> 
<body> 
<ul> 
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li> 
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li> 
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li> 
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li> 
</ul> 
<br/><br/><br/><br/> 
<br/><br/><br/><br/>
</body> 
</html>
Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Gibt es einen Fehler beim Aufruf von fs.renameSync in Node.js?

Verwenden Sie npm, um ein Vue-Projekt zu erstellen (ausführliches Tutorial)

So verwenden Sie fs.rename in node.js, um eine erzwungene Umbenennung zu implementieren

Das obige ist der detaillierte Inhalt vonSo vergrößern Sie Bilder in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript node.js npm JS
Stellungnahme：
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
Vorheriger Artikel：Verwenden Sie Axios, um Dateien in Vue hochzuladenNächster Artikel：Verwenden Sie Axios, um Dateien in Vue hochzuladen

In Verbindung stehende Artikel

Mehr sehen