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

迈不过友情╰ 2022-08-23 11:53 152阅读 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>