实现这个例子的代码是这样的:
<html>
<head>
<script language="javascript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.ypos = parseInt(block.top) }
//*定义初始函数,两种浏览器下的对象的横向、竖向坐标分别对应于对象相对于窗
口的左端、顶端的位置*//
function moveTo(obj,x,y) {
obj.xpos = x
obj.left = obj.xpos
obj.ypos = y obj.top = obj.ypos }
//*定义绝对移动函数*//
function moveBy(obj,x,y) {
obj.xpos += x
obj.left = obj.xpos
obj.ypos += y
obj.top = obj.ypos }
//*定义相对移动函数*//
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible" }
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden" }
//*定义显示、隐藏函数*//
//--> </script> </head>
<body onload="init()">
Check Values:
<a href="javascript:alert('X: ' + block.xpos)">横向位置</a>,
<a href="javascript:alert('Y: ' + block.ypos)">竖向位置</a> <br>
Visibility:
<a href="javascript:showObject(block)">显示</a>,
<a href="javascript:hideObject(block)">隐蔽</a> <br>
移动到 MoveTo:
<a href="javascript:moveTo(block,100,200)">(100,200)</a>,
<a href="javascript:moveTo(block,200,260)">(200,260)</a>,
<a href="javascript:moveTo(block,300,340)">(300,340)</a> <br>
相对移动 MoveBy:
<a href="javascript:moveBy(block,10,0)">(10,0)</a>,
<a href="javascript:moveBy(block,-10,0)">(-10,0)</a>,
<a href="javascript:moveBy(block,0,10)">(0,10)</a>,
<a href="javascript:moveBy(block,0,-10)">(0,-10)</a>
//*调用javascript中定义的函数*//
<div id="blockDiv" style="position:absolute; left:100; top:200;
width:30; visibility:visible;">
//*初始化一个区域的原始位置*//
<img src="ss05058.jpg" border=0> </div> </body>
</html>
下一节我将向您介绍一个滑动的例子。