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

最新推荐文章于 2017-06-02 09:30:09 发布

夏末_阳光依然耀眼

最新推荐文章于 2017-06-02 09:30:09 发布

阅读量794

点赞数 1

分类专栏： div+css 文章标签： jquery div css 图片

本文链接：https://blog.csdn.net/boyit0/article/details/38066485

版权

div+css 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

<!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>