»
Tiếng AnhTiếng PhápTiếng Việt

In - Ô vuông di chuyển - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Linh tinh » Ô vuông di chuyển
URL: https://www.javascriptbank.com/gliding-layer.html

Ô vuông di chuyển © JavaScriptBank.comHiệu ứng tạo một ô vuông di chuyển khi ta nhấp chuột vào liên kết.

Phiên bản đầy đủ: jsB@nk » Linh tinh » Ô vuông di chuyển
URL: https://www.javascriptbank.com/gliding-layer.html



JavaScript
<SCRIPT language=JavaScript><!--// Example -// <a href="#" onmousedown="glide('elDiv',660,10)">glide</a>// where the arguments are glide(id of layer, the end position of layer animation, number of steps)function glide(obj,endPos,steps) {// changing this number will vary the amount of glidingvar decrease = 0.05; if (document.getElementById) {el = document.getElementById(obj).style ;}else if (document.all){el = document.all[obj].style; }else if (document.layers) { el = document.layers[obj];}// you can change references to left in the script to top and that will give a vertical animation el.xpos = parseInt(el.left);if (el.xpos < endPos) {distance = endPos - el.xpos;steps = distance*decrease; // to shove a layer off screen change to// el.xpos -= steps;el.xpos += steps;el.left = el.xpos;// change the 30 value to increase or decrease speed, higher the numeric value the slower the speedsetTimeout("glide('" + obj + "'," + endPos + "," + steps + ")",30);  } }function glide_from_jsbank(){var x = Math.ceil(Math.random()*500),y = Math.ceil(Math.random()*500);glide('elDiv', x, y);}//--></SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<A onclick="glide_from_jsbank();" href="#">glide</A> <DIV id=elDiv style="LEFT: 50px; WIDTH: 30px; CLIP: rect(0px 30px 30px 0px); POSITION: absolute; TOP: 100px; HEIGHT: 30px; BACKGROUND-COLOR: red; layer-background-color: red"></DIV><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->