电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
DHTML学习(三)
DHTML学习(三)
2005-12-30 19:13:57  文/45IT收集   出处:电脑软硬件应用网   

第3节. 显示/隐藏

下面的子程序可以让你在不同的浏览器中使用显示和隐藏的功能 
<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
}

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>
具体调用过程如下: 

showObject(block)
hideObject(block)
第4节. 元素的移动与滑动
要实现元素的移动与滑动,就必须有办法取得元素的当前位置,IE和NS取得元素的方法略有差别,因为 IE 储存元素位置的时候总在值的后面加 "px". 我们可用如下方法处理:

假如你想得到 

block.left (记住block是前文提到的指针变量)
你要写成: 

parseInt(block.left)
  另外,JavaScript 可以让你无限制的给元素添加新的性质,这给我们编程带来极大便利,就上例,每次都写 parseInt() 很麻烦,编程时我们可以把元素当前的位置记在两个新的性质xpos, ypos里: 

block.xpos = parseInt(block.left)
block.ypos = parseInt(block.top)
这样, 以后你想要知道元素的位置, 只要调用 xpos 和 ypos 就行了。

通用移动子程序 

moveto() Function 

下面这个子程序用来移动一个元素到绝对位置 (x, y) 

function moveTo(obj,x,y) {
obj.xpos = x
obj.left = obj.xpos
obj.ypos = y
obj.top = obj.ypos
}
使用这个子程序移动元素,只需赋予 layer 的指针名字和新的位置 x, y 就行了。看下面例子: 

if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.ypos = parseInt(block.top)
如果你要把blockDiv移动到一个新的地址 (50, 100), 你可以用如下的语句完成. 

moveTo(block,50,100)
moveBy() Function 


下面这个子程序用来移动一个元素到相对位置 (x, y),它与 moveTo() 的区别在于它是把元素移动到相对于当前的位置 x, y,而不是窗口的坐标 x, y. 

function moveBy(obj,x,y) {
obj.xpos += x
obj.left = obj.xpos
obj.ypos += y
obj.top = obj.ypos
}
比如把上述元素往右边移动 20 pixels 和往上移动 10 pixels. 你可以写成 

moveBy(block,20,-10)
 
服务器租用、托管;域名注册;虚拟主机
江湖、聊天室租用;程序开发,网站建设
欢迎咨询http://nicchina.com/
QQ:30196310

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    详解HTML页面播放视频元素param的属…
    HTML教程:几个不常用的HTML标记使用…
    HTML教程:marquee标签实现滚动效果
    网页设计师要知道的30条HTML代码编写…
    语义化的HTML结构到底有何好处
    不常用的HTML标签Fieldset
    一些HTML表格的使用高级语法
    网页优化的最基础部分:HTML的优化
    10大HTML标签常犯的错误
    HTML、XHTML和XML的比较
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号