CSS特效赏析
1.动态改变样式
2.动态可视化效果
3.动态滤镜显示
4.Blentrans属性
5.Revealtrans属性
6.动态Glow属性
7.显示和隐藏
8.兼容两种浏览器
9.移动对象
10.对象的滑动
11.键盘控制对象
12.鼠标控制对象
13.Clip属性的应用
14.动态文字变换
15.动态改变页面样式
16.动态时钟控制
17.倒计时
18.动态刷新
|
CSS特效赏析
上一实例 下一实例
9、移动
通过下面这个例子，您可以把图片移动到指定的地方。
实现这个例子的代码是这样的：
<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>
下一节我将向您介绍一个滑动的例子。
上一实例 下一实例
|