jquery图片移位效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片移位效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>jquery图片随机移位效果</title>
    <meta name="generator" content="editplus">
    <meta name="author" content>
    <meta name="keywords" content>
    <meta name="description" content>
    <script id="jquery_172" type="text/javascript" class="library" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
    <div>
        <div class="item">
            <img src="images/1.jpg" />
        </div>
        <div class="item">
            <img src="images/2.jpg" />
        </div>
        <div class="item" current>
            <img src="images/3.jpg" />
        </div>
        <div class="item">
            <img src="images/4.jpg" />
        </div>
        <div class="item">
            <img src="images/5.jpg" />
        </div>
    </div>


    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            position: relative;
            margin: 50px;
        }

        .item {
            position: absolute;
            border: 1px solid #fff;
        }
    </style>
    <script>
$(function () {
    $('.item').each(function () {
        var size = $('.item').size();
        var index = $('.item').index($(this));
        $(this).css({
            left: index * 160,
            top: 50 - Math.abs(index - Math.floor(size / 2)) * 50,
            zIndex: size - Math.abs(index - Math.floor(size / 2))
        });
        $(this).attr('index', index);
    });

    $('.item').click(function () {

        var current = $('.item[current]');
        current.stop(true, true);
        $(this).stop(true, true);

        var top = current.css('top');
        var left = current.css('left');
        var index = current.attr('index');

        $('.item[current]').css('zIndex', $(this).css('zIndex')).removeAttr('current');
        current.attr('index', $(this).attr('index'));
        current.animate({ top: $(this).css('top'), left: $(this).css('left') }, 500);


        $(this).css('zIndex', 999);
        $(this).attr('current', '');
        $(this).animate({ top: top, left: left }, 500);

    });
})</script>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)