您的位置：首页 > Web前端 > JQuery

jquery 图片自由拼凑，鼠标移上图片晃动效果代码

2014-07-23 16:32 330 查看

<!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>
<script type="text/javascript" src="script/jquery.1.6.3.js"></script>
<script type="text/javascript">
$(window).load(function(){
var thumbnail = {imgIncrease : 10,effectDuration : 200};
$(".free_bk li").each(function(index,item){
var current_img = $(item).find("img");
if (current_img.length > 0) {
var currentWidth = 0,
currentHeight = 0;
currentWidth = current_img.width();
currentHeight = current_img.height();
$(item).width(currentWidth).height(currentHeight);
$(item).hover(function() {
var currentImg = $(item).find("img");
thumbnail.imgIncreaseWidth = Math.floor(parseInt(currentWidth) * 0.02);
thumbnail.imgIncreaseHeight = Math.floor(parseInt(currentHeight) * 0.02);
currentImg.stop().animate({
width: parseInt(currentWidth) + thumbnail.imgIncrease,
left: thumbnail.imgIncreaseWidth / 2 * ( - 1),
top: thumbnail.imgIncreaseHeight / 2 * ( - 1)
},
{
"duration": thumbnail.effectDuration,
"queue": false
});
$(item).find(".caption:not(:animated)").slideDown(thumbnail.effectDuration)
},
function() {
var currentImg = $(item).find("img");
currentImg.animate({
width: currentWidth,
left: 0,
top: 0
},
thumbnail.effectDuration);
$(item).find(".caption").slideUp(thumbnail.effectDuration)
})
}
});

});
</script>
<style type="text/css">
.free_bk{ width:970px; height:440px; position:relative; overflow:hidden;}
.free_bk li{margin:0 1px 1px 0; display:block; font-size:0; position:relative;overflow:hidden; }
.free_bk ul li a img{position:relative; border:0;}
</style>
</head>

<body>
<div class="free_bk">
<ul>
<li><a href="#" class="" title="1"><img alt="图片名称关键字" src="images/1.jpg" /></a></li>
<li><a href="#" class="" title="2"><img alt="图片名称关键字" src="images/2.jpg" /></a></li>
<li><a href="#" class="" title="3"><img alt="图片名称关键字" src="images/3.jpg" /></a></li>
<li><a href="#" class="" title="4"><img alt="图片名称关键字" src="images/4.jpg" /></a></li>
</ul>
</div>
</body>
</html>

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

标签： jquery div css 图片

相关文章推荐

新的分享

章节导航