|
|
CSS特效赏析
CSS特效赏析
1.动态改变样式
2.动态可视化效果
3.动态滤镜显示
4.Blentrans属性
5.Revealtrans属性
6.动态Glow属性
7.显示和隐藏
8.兼容两种浏览器
9.移动对象
10.对象的滑动
11.键盘控制对象
12.鼠标控制对象
13.Clip属性的应用
14.动态文字变换
15.动态改变页面样式
16.动态时钟控制
17.倒计时
18.动态刷新
|
CSS特效赏析
上一实例 下一实例
10、滑动
上一节我们介绍了一个移动的例子，它可以使您随意放置对象的位置。那可不可以
让对象连续移动，从而实现一种动画的效果呢？我们来看个例子， 。
怎么样，是不是有一种动起来的感觉，实现这种效果的代码如下：
<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，横坐标等于对象距窗口左端的长度*//
function slide() {
if (block.xpos < 500) {
block.xpos += 5
block.left = block.xpos
setTimeout("slide()",10) }
} //*定义一个滑动函数，当横坐标小于500时，对象距离左端的坐标值，每加5改
变一次，后面是一个定时语句*//
function moveTo(obj,x,y) {
obj.xpos = x
obj.ypos = y
obj.left = obj.xpos
obj.top = obj.ypos }
//*定义绝对移动函数，使对象的横坐标等于距离窗口左端的长度，纵坐标等于距离
窗口顶端的长度*//
//--> </script> </head>
<body onLoad="init()">
<p> <a href="javascript:slide()">滑动</a>
<a href="javascript:moveTo(block,50,150)">返回</a>
<div id="blockDiv" STYLE="position:absolute; left:50; top:150;
width:400;"> //*定义对象的绝对位置*//
<img src="ss05058.jpg" width=250 height=150 border=0>
//*导入一张图片*// </div> </body>
</html>
本节我们讲述了一个滑动的例子，下一节将向您介绍一种用键盘控制对象移动、滑
动的方法。
上一实例 下一实例
|
|