0712-2888027 189-8648-0214
微信公眾號

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > jquery鼠標(biāo)懸停圖片平滑放大效果

jquery鼠標(biāo)懸停圖片平滑放大效果

時(shí)間:2015-11-11來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 694次

<!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=gb2312" />
<title>無標(biāo)題文檔</title>
<style>
.hover{ background:#666666;}
.picShow{margin:0px auto;width:700px; height:200px;margin-top:100px; position:relative;}
.picShow ul li img{width:159px; height:195px;-ms-interpolation-mode: bicubic;}
ul{margin:0; padding:0;}
ul li{ list-style:none; margin:0; padding:0; float:left; position:relative;}
</style>
<script src="http://www.dopic.net/../jquery-1.4.2.min.js"></script>
<script language="javascript">
$(function(){
$("ul li").hover(function(){
$(this).css({'z-index' : '10'});
$(this).find("img").addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '20%',
left: '60%',
width: "259px",
height: '295px',
padding: '20px' ,
position:'absolute'
},200);
},function(){
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '159px',
height: '195px',
padding: '0px'
}, 400);

});

});
</script>
</head>

<body>
<div class="picShow">
<ul>
<li><img src="http://www.dopic.net/1.jpg" /></li>
<li><img src="http://www.dopic.net/2.jpg" /></li>
<li><img src="http://www.dopic.net/3.jpg" /></li>
<li><img src="http:/www.dopic.net/4.jpg" /></li>
</ul>
</div>
</body>
</html>

欄目列表
推薦內(nèi)容
熱點(diǎn)內(nèi)容
展開