|
|
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特效赏析
上一实例 下一实例
12、鼠标控制
上一节我们讲了一个键盘控制的例子，本节我将向您介绍一个鼠标控制的例子。在
下面这个例子中，点击图片上方的超链接，图片就会移动。如果用鼠标一直按住链接不
放的话，图片就会持续移动下去。
实现这种效果的代码如下：
<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.active = false }//*兼容两种浏览器*//
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
setTimeout("slide()",30) }
} //-->
</script> </head>
<body bgcolor="#FFFFFF" onLoad="init()">
请您点击"移动"两个字，再一直按住鼠标左键看一看 <br>
<a href="javascript:void(null)"//*不要换网页*//
onMouseDown="block.active=true; slide(); return false;"
onMouseUp="block.active=false"
onMouseOut="block.active=false">移动</a>
//*设置鼠标的三种状态，当鼠标按下的时候，激活slide（）函数，开始滑动*//
<div id="blockDiv"
style="position:absolute; left:50; top:100; width:250;height:180">
<img src="ss07049.jpg" width=250 height=180 border=0>
</div>
</body>
</html>
其实上面这段代码和键盘控制的代码很相象，只是多了一个超链接的控制。
好了，下一节我将向您介绍动态控制对象可视区域的例子，听起来是不是很拗口，
没关系，很有意思的。
上一实例 下一实例
|
|