您的位置：首页 > 其它

兼容ie6的图片有由中心逐渐

2016-06-24 14:35 417 查看

图片由中心点逐渐放大，兼容到ie6，如下所示：

<!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>jQuery鼠标悬停图片由中心点逐渐放大效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
.lanrenzhijia{ width:250px; height:321px; margin:100px auto; position:relative;}
.lanrenzhijia img{ position:absolute; left:0; top:0; cursor:pointer;}
</style>
</head>
<body>

<div class="lanrenzhijia">
<img src="images/lanren.png" class="pic" />
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
$w = $('.pic').width();
$h = $('.pic').height();
$w2 = $w + 30;
$h2 = $h + 30;

$('.pic').hover(function(){
$(this).stop().animate({height:$h2,width:$w2,left:"-15px",top:"-15px"},500);
},function(){
$(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500);
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航