DHTML实现 sprite

来源：互联网发布：流水号生成算法编辑：程序博客网时间：2024/06/05 05:16

今天又来学习一个新的例子，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了可以运行看一下效果：

具体文件：http://pan.baidu.com/s/1mgocLMK

1 0