利用BEHAVIOR创建包含动作的CSS

BEHAVIOR是一个非常有用的东西，使用它可以使你的CSS富有极强的能力。同时它也可以对某些JS脚本进行封装，比如页面上有很多可以让用户移动的对象，传统写法会出现很多JS，这些JS和页面混在一起，当使用BEHAVIOR时事情就变得简单多了

 

1、创建使对象可以移动的CSS

    创建Move.htc文件，内容如下：

<!----------------------------------------------------------------------   可移动页面元素   使用：     设定移动热点的CSS包含此文件的行为，赋值移动热点的MoveObjID属性为需要移动的HTML对象ID。     当移动完成后，会触发OnChange事件   注意MoveObjID和ID值区分大小写   By Tooper，2005-8-19 -------------------------------------------------------------------------> <PUBLIC:COMPONENT> <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="MouseDown()" /> <PUBLIC:ATTACH EVENT="onmouseover"  ONEVENT="MouseOver()" /> <PUBLIC:ATTACH EVENT="onmouseup"  ONEVENT="DragEnd()" /> <PUBLIC:ATTACH EVENT="onmousemove"  ONEVENT="DragStart()" /> <SCRIPT LANGUAGE="JScript">    var xx=0,yy=0,moveok=0;   function MouseDown(){     if(event.button==1)     {       moveok=1;       setCapture();       xx=event.x-this.offsetLeft;       yy=event.y-this.offsetTop;     }      }   function MouseOver(){        this.style.cursor="move";   }        function DragStart(){        if(moveok==1)     {       this.style.left=event.x-xx;       this.style.top=event.y-yy;     }   }   function DragEnd(){     moveok=0;     releaseCapture();     if(parseInt(this.style.top)<-10)     {       alert("高度不能低于页面最顶部");       this.style.top=1;     }      } </SCRIPT>

</PUBLIC:COMPONENT>

<!--MOVE.HTC结束-->

在HTML页面里面增加样式表

<style>

      .CanMove { BEHAVIOR: url(Move.htc) }

</style>

在HTML中可以使用 <div class=CanMove  style="WIDTH: 50px; POSITION: absolute; HEIGHT: 50px"> </div> 此时该DIV可以移动，鼠标在上面的时候显示为“手”

在一个HTML页面中可以给多个元素赋予该CSS，互不影响

此程序在IE6.0上测试通过

2、创建按钮的CSS

    创建BTN.htc文件，内容如下：

<PUBLIC:COMPONENT> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" /> <PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="Restore()" /> <PUBLIC:ATTACH EVENT="onmousedown"  ONEVENT="mousedown()" /> <PUBLIC:ATTACH EVENT="onmouseup"  ONEVENT="Restore()" />

<SCRIPT LANGUAGE="JScript">     function Hilite()     {     this.style.background="url("+this.mouseoverimg+")";     }

    function Restore()   {     this.style.background="url("+this.mouseoutimg+")";   }   function mousedown()   {         this.style.backgroundImage="url("+this.mousedownimg+")";   } </SCRIPT> </PUBLIC:COMPONENT>

<!--BTN.htc文件结束-->

将CODE页面中的代码保存为BTN.HTC文件，放在和HTML页面同一目录 在HTML中声明CSS： .ToolBtn { BEHAVIOR: url(BTN.htc) }

在HTML中可以使用 <img class="ToolBtn" src="a.GIF" mouseoverimg="b.GIF" mouseoutimg="a.GIF" mousedownimg="d.gif">

此时，在鼠标over这个IMG时显示mouseoverimg指名的图片，鼠标按下时显示mousedownimg指名的图片，鼠标移开时显示mousedownimg指名的图片

在一个HTML页面中可以给多个元素赋予该CSS，互不影响

此程序在IE6.0上测试通过