Phiên bản đầy đủ: jsB@nk » Hình ảnh » Bóng bật tự do
URL: https://www.javascriptbank.com/free-bouncing-ball.html
Hiệu ứng tạo ra một quả bóng có thể nảy bật tự do trong website. Bạn có thể thay đổi các thông số về biên, độ nảy của quả bóng.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Bóng bật tự do
URL: https://www.javascriptbank.com/free-bouncing-ball.html
<SCRIPT>function getScale(c, height) { var t = Math.sqrt(2 * height / c.gravity); var scale = 4 * height / sqr(t); return scale;}function sqr(x) { return x * x;}function updateBounce(c) { var bottom = getViewYOffset() + getViewHeight() - c.imageHeight; for (var i = 0; i < c.imageCount; i++) { var name = c.prefix + i; var scale = c.pScale[name]; var x = getLayerX(name) + c.xSpeed[name]; var y = -scale * sqr(c.pIndex[name]) + c.pHeight[name]; if (y > 0) y = bottom - y; else y = bottom; var bounds = outOfBounds(c, x, y, c.imageWidth, c.imageHeight); if (bounds & 1) { // left x = 2 * getViewXOffset() - x; c.xSpeed[name] = -c.xSpeed[name] * c.elasticity; } if (bounds & 2) { // right x = 2 * (getViewXOffset() + getViewWidth() - c.imageWidth) - x; c.xSpeed[name] = -c.xSpeed[name] * c.elasticity; } moveLayer(name, x, y); if ((c.pIndex[name] += 0.5) > c.pLimit[name]) { c.xSpeed[name] *= 1 - c.friction; c.pIndex[name] -= Math.sqrt(c.pHeight[name] / scale); c.pHeight[name] = Math.max(0.25, c.pHeight[name] * c.elasticity); c.pIndex[name] = -(c.pLimit[name] = Math.sqrt(c.pHeight[name] / scale)); if (c.pHeight[name] < c.kickThreshold) { if (c.kickOpt == 1) { // kick c.pHeight[name] = 100 + random(getViewHeight()); c.xSpeed[name] = random(41) - 20; scale = (c.pScale[name] = getScale(c, c.pHeight[name])); c.pIndex[name] = -(c.pLimit[name] = Math.sqrt(c.pHeight[name] / scale)); } else if (c.kickOpt == 2) { // drop c.pHeight[name] = getViewHeight() + c.imageHeight + 100 + random(500); c.pScale[name] = getScale(c, c.pHeight[name]); c.xSpeed[name] = random(41) - 20; c.pIndex[name] = 0; c.pLimit[name] = Math.sqrt(c.pHeight[name] / scale); } } } } setTimeout('updateBounce(c' + c.uid + ')', c.updateInterval);}</SCRIPT><SCRIPT>msie = navigator.appVersion.indexOf("MSIE") != -1;function layerSupport() { return (document.all || document.layers);}layers = new Array();layerX = new Array();layerY = new Array();cursorX = 0;cursorY = 0;function getViewWidth() { if (msie) return document.body.clientWidth; else return window.innerWidth;}function getViewHeight() { if (msie) return document.body.clientHeight; else return window.innerHeight;}function getViewXOffset() { if (msie) return document.body.scrollLeft; else return window.pageXOffset;}function getViewYOffset() { if (msie) return document.body.scrollTop; else return window.pageYOffset;}function getLayerX(i) { return layerX[i];}function getLayerY(i) { return layerY[i];}function moveLayer(i, x, y) { layerX[i] = x; layerY[i] = y; if (msie) { layers[i].style.pixelLeft = x; layers[i].style.pixelTop = y; } else { layers[i].left = x; layers[i].top = y; }}function setVisible(i, show) { if (msie) layers[i].style.visible = show ? "show" : "hidden"; else layers[i].visibility = show;}function outOfBounds(config, x, y, w, h) { var result = 0; // note that fudge factor isn't used for bottom if (x < getViewXOffset() - config.xFudge) result |= 1; // Left else if (x + w >= getViewXOffset() + getViewWidth() + config.xFudge) result |= 2; // Right if (y + h >= getViewYOffset() + getViewHeight()) result |= 4; // Bottom else if (y < getViewYOffset() - config.yFudge) result |= 8; // Top return result;}function random(bound) { return Math.floor(Math.random() * bound);}function randomX(config) { return getViewXOffset() + random(getViewWidth() - config.imageWidth);}function randomY(config) { return getViewYOffset() - config.yFudge + random(getViewHeight() + config.yFudge - config.imageHeight);}function setVisible(i, show) { if (msie) layers[i].style.visibility = show ? "" : "hidden"; else layers[i].visibility = show ? "show" : "hide";}function writeImage(image, name, x, y) { layerX[name] = x; layerY[name] = y; if (msie) { document.writeln('<div id="' + name + '" style="position:absolute;left:' + x + ';top:' + y + ';"><img src="' + image + '"></div>'); layers[name] = document.all[name]; } else { document.writeln('<layer id="' + name + '" left=' + x + ' top=' + y + '><img src="' + image + '"></layer>'); layers[name] = document.layers[name]; }}function writeImages(config) { for (var i = 0; i < config.imageCount; i++) { var startX = randomX(config); var startY = config.startOnScreen ? randomY(config) : -config.imageHeight; var name = config.prefix + i; writeImage(config.image, name, startX, startY); }}function cursorXY(e) { cursorX = msie ? (getViewXOffset() + event.clientX) : e.pageX; cursorY = msie ? (getViewYOffset() + event.clientY) : e.pageY;}function captureXY() { if (!msie) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = cursorXY;}function config() { this.xFudge = 0; this.yFudge = 0; this.updateInterval = 50; this.startOnScreen = true; this.imageCount = 1;}</SCRIPT><SCRIPT>if (layerSupport()) {c205 = new config();c205.uid = 205;c205.prefix = "y_bounce205";c205.image = "bong.gif";c205.imageWidth = 130;c205.imageHeight = 138;c205.imageCount = 1;c205.gravity = 4;c205.friction = 0.1;c205.elasticity = 0.50;c205.topWall = 0;c205.xSpeed = new Array();c205.pHeight = new Array();c205.pIndex = new Array();c205.pScale = new Array();c205.pLimit = new Array();c205.kickThreshold = 5;c205.kickOpt = 1;for (var i = 0; i < c205.imageCount; i++) { var name = c205.prefix + i; c205.xSpeed[name] = random(41) - 20; c205.pHeight[name] = -1 == -1 ? randomY(c205) : -1 + random(50); c205.pScale[name] = getScale(c205, c205.pHeight[name]); c205.pLimit[name] = Math.sqrt(c205.pHeight[name] / c205.pScale[name]); c205.pIndex[name] = 0; writeImage(c205.image, name, randomX(c205), c205.pHeight[name]);} setTimeout('updateBounce(c205)', c205.updateInterval); }</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->