DHTML实现 sprite

最新推荐文章于 2020-12-03 06:33:35 发布

chenke__hxx

最新推荐文章于 2020-12-03 06:33:35 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： JavaScript sprite

本文链接：https://blog.youkuaiyun.com/chenke__hxx/article/details/19173597

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用 DHTML 实现 sprite 图像的方法，通过 JavaScript 控制 div 元素展示 sprite 中的不同部分，实现了动态 bouncySprite 效果，并集合多个 bouncySprite 创建了互动演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天又来学习一个新的例子，sprite这里说的sprite不是css技术中的sprite，虽然有点相同。css的background-position属性使得HTML元素（如一个div）可以显示大背景图中的一小部分。因此一个大图像可以作为许多小sprite图像的容器。关键是在于确定每个sprite的背景图的位置。

最关键的sprite代码

var DHTMLSprite = function (params) {
            var width = params.width,
                height = params.height,
                imagesWidth = params.imagesWidth,

                // 添加sprite div  $element保存对最后一个sprite div的引用
                $element = params.$drawTarget.append('<div/>').find(':last'),
                elemStyle = $element[0].style,
                mathFloor = Math.floor;

                // 设置div的相关属性
                $element.css({
                    position : 'absolute',
                    width : width,
                    height : height,
                    backgroundImage : 'url(' + params.images + ')'
                });
                var that = {

                        // 确定 sprite div 在父元素上的位置
                       draw: function (x, y) {
                            elemStyle.left = x + 'px';
                            elemStyle.top = y + 'px';
                        },

                        // 设置sprite div 的具体背景图
                        changeImage: function (index) {
                            index *= width;
                            var vOffset = -mathFloor(index / imagesWidth) * height;
                            var hOffset = -index % imagesWidth;
                            elemStyle.backgroundPosition = hOffset + 'px ' + vOffset + 'px';
                        },

                        show: function () {
                            elemStyle.display = 'block';
                        },
                        hide: function () {
                            elemStyle.display = 'none';
                        },
                        destroy: function () {
                            $element.remove();
                        }
                    };
                // Return the instance of DHTMLSprite.
                return that;
        };

创建一个动态的bouncySprite对象，主要实现sprite的动态化：

var bouncySprite = function (params) {
            var x = params.x,
                y = params.y,
                xDir = params.xDir,
                yDir = params.yDir,
                maxX = params.maxX,
                maxY = params.maxY,
                animaIndex = 0,
                that = DHTMLSprite(params);

                // sprite移动函数
                that.moveAndDraw = function () {
                    x += xDir;
                    y += yDir;
                    animaIndex += xDir > 0 ? 1 : -1;
                    animaIndex %= 5;
                    animaIndex += animaIndex < 0 ? 5 : 0;

                    if ((xDir < 0 && x < 0) || (xDir > 0 && x >= maxX)) {
                        xDir = -xDir;
                    }

                    if ((yDir < 0 && y < 0) || (yDir > 0 && y >= maxY)) {
                        yDir = -yDir;
                    }

                    // 使背景看起来运动  若不清楚可以注释之后看效果
                    that.changeImage(animaIndex);
                    that.draw(x, y);
                };

                return that;
        };

最后一个bouncySprite合集bouncyBoss

var bouncyBoss = function(numBouncy, $drawTarget) {
            var bouncys = [];
            for (var i = 0; i < numBouncy; i++) {
                bouncys.push(bouncySprite({
                    images : 'images/cogs.png',
                    imagesWidth : 256,
                    width : 64,
                    height : 64,
                    $drawTarget : $drawTarget,
                    x : Math.random() * ($drawTarget.width() - 64),
                    y : Math.random() * ($drawTarget.height() - 64),
                    xDir : Math.random() * 4 - 2,
                    yDir : Math.random() * 4 - 2,
                    maxX : $drawTarget.width() - 64,
                    maxY : $drawTarget.height() - 64
                }));
            }

            var moveAll = function () {
                var len = bouncys.length;
                for (var i = 0; i < len; i++) {
                    bouncys[i].moveAndDraw();
                }
                setTimeout(moveAll, 10);
            }
            moveAll();
        };

然后ok了可以运行看一下效果：