jquery如何实现将鼠标悬停在图像上平滑放大效果

2022-11-16 0 512

jquery如何实现将鼠标悬停在图像上平滑放大效果

<!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>无标题文档</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>

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载

发表评论
暂无评论