编程论坛 → JavaScript论坛

JQuery动画效果小插件

冰镇柠檬汁儿发布于 2015-06-05 22:47， 1581 次点击

既然大家都说JQuery如何如何好，那我写个小插件，没什么特效，只是在div区域中来回弹来弹去的小动画
以下是HTML，附件是程序调用的图片，二楼是JS脚本

<!DOCTYPE html>

<html lang="en" xmlns="http://www.
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .draw-target { width: 320px; height: 256px; position: relative; float: left; margin: 5px; }
    </style>
    <script src="jquery-1.7.1.min.js"></script>
    <script src="sprite.js"></script>
    <script>
        $(document).ready(function () {
            $('.draw-target').bouncyPlugin({
                number: 5,
                bgColor: '#8ff'
            });
        });
    </script>
</head>
<body>
    <div class="draw-target"></div>
    <div class="draw-target"></div>
    <div class="draw-target"></div>
    <div class="draw-target"></div>
</body>
</html>

只有本站会员才能查看附件，请登录

6 回复

#2

冰镇柠檬汁儿2015-06-05 22:48

(function ($) {
    $.fn.bouncyPlugin = function (option) {
        var dhtml = function (params) {
            var width = params.width,
                height = params.height,
                imageWidth = params.imageWidth,
                $element = params.target.append('<div/>').find(':last'),
                eleStyle = $element[0].style;

            $element.css({
                position: 'absolute',
                width: width,
                height: height,
                backgroundImage: 'url(' + params.image + ')'
            });

            var that = {
                draw: function (x, y) {
                    eleStyle.left = x + 'px';
                    eleStyle.top = y + 'px';
                },
                changeImage: function (index) {
                    index *= width;
                    var vset = -Math.floor(index / imageWidth) * height,
                        hset = -index % imageWidth;
                    eleStyle.backgroundPosition = hset + 'px ' + vset + 'px';
                },
                show: function () {
                    eleStyle.display = 'block';
                },
                hide: function () {
                    eleStyle.display = 'none';
                },
                destroy: function () {
                    $element.remove();
                }
            };

            return that;
        };

        var bouncy = function (params) {
            var x = params.x,
                y = params.y,
                xdir = params.xdir,
                ydir = params.ydir,
                xmax = params.xmax,
                ymax = params.ymax,
                animIndex = 0,
                that = dhtml(params);

            that.moveAndDrow = function () {
                x += xdir;
                y += ydir;
                animIndex += xdir > 0 ? 1 : -1;
                animIndex %= 5;
                animIndex += animIndex < 0 ? 5 : 0;

                ((xdir < 0 && x < 0) || (xdir > 0 && x >= xmax)) && (xdir *= -1);
                ((ydir < 0 && y < 0) || (ydir > 0 && y >= ymax)) && (ydir *= -1);

                that.changeImage(animIndex);
                that.draw(x, y);
            };

            return that;
        };

        var bouncyBoss = function (num, target) {
            var bys = [], i = 0;
            for (; i < num; i++) {
                bys.push(bouncy({
                    image: 'img.png',
                    imageWidth: 256,
                    width: 64,
                    height: 64,
                    target: target,
                    x: Math.random() * target.width() - 64,
                    y: Math.random() * target.height() - 64,
                    xdir: Math.random() * 4 - 2,
                    ydir: Math.random() * 4 - 2,
                    xmax: target.width() - 64,
                    ymax: target.height() - 64
                }));

                (function () {
                    for (var i = 0, len = bys.length; i < len; i++) {
                        bys[i].moveAndDrow();
                    }
                    setTimeout(arguments.callee, 10);
                })();
            }
        };

        option = $.extend({}, $.fn.bouncyPlugin.defaults, option);

        return this.each(function () {
            var target = $(this);
            target.css('background-color', option.bgColor);
            bouncyBoss(option.number, target);
        });
    };

    $.fn.bouncyPlugin.defaults = {
        bgColor: '#f00',
        number: 10
    };
})(jQuery);

[ 本帖最后由冰镇柠檬汁儿于 2015-6-5 22:49 编辑 ]

#3

wmf20142015-06-06 10:30

这该怎么调用？你有两个js文件，我应该把二楼代码放在哪个文件里？没弄出来。

#4

林月儿2015-06-06 10:45

4楼同问

#5

冰镇柠檬汁儿2015-06-06 12:38

<script src="jquery-1.7.1.min.js"></script>
<script src="sprite.js"></script>

问的是这两个脚本吗？
第一个是jquery的类库，现在最高版本好像是1.10.2什么的，网上很多可以下载，实在不行百度首页源代码里也有
https://ss0.

第二个就是2楼的代码，保存成一个UTF-8格式的js文件（记事本另存为里面就可以设置），然后放在html同级目录下就可以了

#6

冰镇柠檬汁儿2015-06-06 12:41

另外图片文件是我随便画的一个png图，效果不是很好，你可以随便照着画，256*128像素的，每个小图是64*64的也放在同级目录下就可以了

1