溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript通過mouseover()實(shí)現(xiàn)圖片變大效果的示例

發(fā)布時間：2020-10-22 10:10:17 來源：腳本之家 閱讀：265 作者：AJin0802 欄目：web開發(fā)

實(shí)例如下所示：

<!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){//鼠標(biāo)懸停的時候 
myHref=this.href;//獲取大圖片 
var $div=$("<div id='tooltip'><img src='"+myHref+"'></img></div>");//創(chuàng)建一個div 
$("body").append($div);//把div添加到body中 
$("#tooltip").css({ 
top:e.pageY+y+"px", 
left:e.pageX+x+"px" 
}).show("slow"); 
}).mouseout(function(e){//鼠標(biāo)移開的時候 
$("#tooltip").remove(); 
}).mousemove(function(e){//鼠標(biāo)移動的時候 
$("#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>

以上這篇JavaScript通過mouseover()實(shí)現(xiàn)圖片變大效果的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手