DHTML实现 sprite
今天又来学习一个新的例子,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
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。