10-4.htm

JavaScript特效大全

<script language=JavaScript>

  var allSupport = document.all!=null<!--判断是否是ie浏览器-->
  
  function setupEventObject(e) {
    if (e==null) return 
    window.event = e<!--获取当前事件-->
    window.event.fromElement = e.target<!--当前事件对象-->
    window.event.toElement = e.target<!--当前事件对象-->
    window.event.srcElement = e.target<!--当前事件对象-->
    window.event.x = e.x<!--事件对象的横坐标-->
    window.event.y = e.y<!--事件对象的纵坐标-->
    window.event.srcElement.handleEvent(e);<!--事件映射函数-->
  }
  
  function checkName(src) {
    while ((src!=null) && (src._tip==null))
      src = src.parentElement<!--循环获得当前事件的对象-->
    return src
  }

  function getElement(elName) {
    if (allSupport)<!--如果是ie浏览器-->
      return document.all[elName]<!--获得对象-->
   
  }

  function writeContents(el, tip) {
    if (allSupport)<!--如果是ie浏览器-->
          el.innerHTML = tip<!--写入文字-->
   
  }

  function getOffset(el, which) {<!--获得位置的偏移-->
      var amount = el["offset"+which] <!--变量赋值-->
    if (which=="Top")<!--如果是上边界-->
      amount+=el.offsetHeight<!--计算出上边界-->
    el = el.offsetParent
    while (el!=null) {
      amount+=el["offset"+which]
      el = el.offsetParent
    }
    return amount<!--返回计算结果-->
  }
  
  function setPosition(el) {
    src = window.event.srcElement
    if (allSupport) {<!--如果是ie浏览器-->
      el.style.pixelTop = getOffset(src, "Top") +10<!--计算出上边界-->
      el.style.pixelLeft = getOffset(src, "Left") +15<!--计算出左边界-->
    } 
  }
  
  function setVisibility(el, bDisplay) {<!--将对象设置为可视与否-->
    if (bDisplay)<!--如果要求设置为可视-->
      if (allSupport)<!--如果是ie浏览器-->
        el.style.visibility = "visible"<!--设置成可视--> 
     
    else
      if (allSupport)<!--如果是ie浏览器-->
        el.style.visibility = "hidden"<!--设置成隐藏-->
     
  }
  
  function displayContents(tip) {
    var el = getElement("tipBox")<!--从tipbox中取得对象-->
    writeContents(el, tip)<!--将tip写入对象中-->
    setPosition(el)<!--设置对象的位置-->
    setVisibility(el, true)<!--并将对象变成可视-->
  }
  
  function doMouseOver(e) {<!--鼠标处于图片上的响应函数-->
    setupEventObject(e)
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)<!--如果事件对应的对象不为空-->
      if  (!el._display) {<!--如果对象状态display为0-->
        displayContents(el._tip)<!--调用displaycontents函数-->
        el._display = true<!--将对象的display标志位置成true-->
      }
  }
  function doMouseOut(e) {<!--鼠标离开一个控件-->
    setupEventObject(e)<!--设置事件函数-->
    el = checkName(window.event.srcElement)<!--得到事件的对象-->
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)
      if (el._display)<!--如果当前对象正在显示-->
        if ((el.contains==null) || (!el.contains(window.event.toElement))) {
          setVisibility(getElement("tipBox"), false)<!--设置成隐藏-->
          el._display = false<!--设置成隐藏-->
        }
  }
  function doLoad() {<!--载入函数-->
    if ((window.document.captureEvents==null) && (!allSupport))
      return 
    if (window.document.captureEvents!=null) <!--浏览器中获取事件-->
      window.document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)<!--获取鼠标的事件-->
    window.document.onmouseover = doMouseOver;<!--调用domouseover函数-->
    window.document.onmouseout = doMouseOut;<!--调用domouseout函数-->
  }

  window.onload = doLoad<!--调用载入函数-->


</script>
<style TYPE="text/css">
#tipBox {position: absolute; 
           width:60px; 
           z-index: 100;
           border: 1pt black solid;
           font-family:宋体;
           font-size: 9pt;
           background: #FFFF00; 
           visibility: hidden}
</style>
<div ID="tipBox"></div>
<img src="cat.jpg" border=0 onMouseOver="this._tip = '<center><font color=#800080>咖啡猫</font></center>' ">



<!--本例程实现了改变图片提示背景颜色的效果-->
<!--鼠标事件响应的原理及如何使用-->
<!--颜色的使用与控制-->
<!--对象属性的意义与改变方法-->