站长学堂
你的位置: 中国个人站长站 -- 站长学堂 -- 网页制作 -- HTML/CSS教程 -- 文章正文 滑动
推荐位

滑动

中国个人站长站 HTML/CSS教程 点击数: 更新时间:2004-10-29 9:30:13
滑动

  上一节我们介绍了一个移动的例子,它可以使您随意放置对象的位置。那可不可以
让对象连续移动,从而实现一种动画的效果呢?我们来看个例子,链接

  怎么样,是不是有一种动起来的感觉,实现这种效果的代码如下:

  <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>

  本节我们讲述了一个滑动的例子,下一节将向您介绍一种用键盘控制对象移动、滑
动的方法。

佚名 文章录入:humianzhizhou    责任编辑:swh 
个人站长站与你风雨同舟!
本站所提供的资源均来源于互联网,如有侵权行为,请与本站管理员联系,我们会第一时间删除!
·如果您发现《滑动》文章有错误,也请通知我们修改!
联系邮箱chinageren#126.com,谢谢支持!
站内搜索:
广告服务 | 友情链接 | 联系我们 | 免责声明 | 用户留言 | 网站导航
版权所有:中国个人站长站 2007-2008 未经授权禁止复制或建立镜像 客服QQ号:112731235
copyright © 2007-2008 www.ChinaGeRen.com online services. all rights reserved. 苏ICP备05000059号