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

移动

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

  通过下面这个例子,您可以把图片移动到指定的地方。链接

  实现这个例子的代码是这样的:

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

  下一节我将向您介绍一个滑动的例子。

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