DHTML实现 sprite

当前位置 : 首页 > 网页制作 > CSS > DHTML实现 sprite

DHTML实现 sprite

来源: 作者: 时间:2016-01-25 10:02
今天又来学习一个新的例子,sprite这里说的sprite不是css技术中的sprite,虽然有点相同。css的background-position属性使得HTML元素(如一个div)可以显示大背景图中的一小部分。因此一个大图像

今天又来学习一个新的例子,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('
').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



Tag:
网友评论

<