管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JS动画效果代码2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
 
</style> 
</head>

<body> 
    <div id="apDiv1"></div> 
    <div id="apDiv2"></div> 
<div id="apDiv3"></div> 
</body> 
</html> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20%24(pId)%7B%20%0D%0A%20return%20document.getElementById(pId)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20JPos()%7B%20%0D%0A%20%20%0D%0A%7D%20%0D%0A%0D%0AJPos.getAbsPos%20%3D%20function(pTarget)%7B%20%0D%0A%20var%20_x%20%3D%200%3B%20%0D%0A%20var%20_y%20%3D%200%3B%20%0D%0A%20while(pTarget.offsetParent)%7B%20%0D%0A%20%20%20_x%20%2B%3D%20pTarget.offsetLeft%3B%20%0D%0A%20%20%20_y%20%2B%3D%20pTarget.offsetTop%3B%20%0D%0A%20%20%20pTarget%20%3D%20pTarget.offsetParent%3B%20%0D%0A%20%7D%20%0D%0A%20_x%20%2B%3D%20pTarget.offsetLeft%3B%20%0D%0A%20_y%20%2B%3D%20pTarget.offsetTop%3B%20%0D%0A%20%20%0D%0A%20return%20%7Bx%3A_x%2Cy%3A_y%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20JAniObj()%7B%20%0D%0A%20this.obj%20%3D%20null%3B%20%0D%0A%20this.interval%20%3D%20null%3B%20%0D%0A%20%20%0D%0A%20this.orgPos%20%3D%20null%3B%20%0D%0A%20this.targetPos%20%3D%20null%3B%20%0D%0A%20%20%0D%0A%20this.orgSize%20%3D%20%7Bw%3A50%2Cy%3A50%7D%3B%20%20%2F%2F%E5%88%9D%E5%A7%8B%E9%95%BF%E5%AE%BD%20%0D%0A%20this.targetSize%20%3D%20%7Bw%3A100%2Cy%3A100%7D%3B%20%2F%2F%E7%9B%AE%E6%A0%87%E9%95%BF%E5%AE%BD%20%0D%0A%20this.step%20%20%3D%20%7Bx%3A10%2Cy%3A10%7D%3B%20%20%2F%2F%E6%AD%A5%E9%95%BF%20x%3Ax%E6%96%B9%E5%90%91%E3%80%80y%3Ay%E6%96%B9%E5%90%91%20%0D%0A%20this.alpha%20%20%3D%20%7Bs%3A10%2Ce%3A90%2Ct%3A10%7D%3B%20%20%2F%2F%E9%80%8F%E6%98%8E%E5%BA%A6%EF%BC%8Cs%E5%88%9D%E5%A7%8B%EF%BC%8Ce%E7%BB%93%E6%9D%9F%2Ct%E6%AD%A5%E9%95%BF%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20JAni()%7B%20%0D%0A%20var%20self%20%3D%20this%3B%20%0D%0A%20var%20aniObjs%20%3D%20%7B%7D%3B%20%0D%0A%20%20%0D%0A%20this.popup%20%3D%20function(pDiv%2CpOrgSize%2CpTargetSize%2CpStep%2CpAlpha)%7B%20%0D%0A%20%20%20%0D%0A%20%20var%20aniObj%20%3D%20new%20JAniObj()%3B%20%0D%0A%20%20aniObjs%5BpDiv%5D%20%3D%20aniObj%3B%20%0D%0A%20%20%20%0D%0A%20%20with(aniObj)%7B%20%0D%0A%20%20%20obj%20%20%20%3D%20%24(pDiv)%3B%20%0D%0A%20%20%20orgPos%20%20%3D%20JPos.getAbsPos(obj)%3B%20%0D%0A%20%20%20orgSize%20%20%3D%20pOrgSize%3B%20%0D%0A%20%20%20targetSize%20%3D%20pTargetSize%3B%20%0D%0A%20%20%20step%20%20%3D%20pStep%3B%20%0D%0A%20%20%20alpha%20%20%3D%20pAlpha%3B%20%0D%0A%20%20%20%20%0D%0A%20%20%20with(obj.style)%7B%20%0D%0A%20%20%20%20overflow%20%3D%20%22hidden%22%3B%20%0D%0A%20%20%20%20position%20%3D%20%22absolute%22%3B%20%0D%0A%20%20%20%20width%20%3D%20pOrgSize.w%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20height%20%3D%20pOrgSize.h%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20left%20%3D%20orgPos.x%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20top%20%3D%20orgPos.y%20%2B%20%22px%22%3B%20%20%0D%0A%20%20%20%20if(document.all)%7B%20%0D%0A%20%20%20%20%20filter%20%3D%20%22Alpha(opacity%3D%22%20%2B%20pAlpha.s%20%2B%20%22)%22%3B%20%0D%0A%20%20%20%20%7Delse%20%0D%0A%20%20%20%20%20opacity%20%3D%20pAlpha.s%20%2F%20100%3B%20%0D%0A%20%20%20%7D%20%20%20%20%0D%0A%20%20%7D%20%0D%0A%20%20%20%0D%0A%20%20aniObj.interval%20%3D%20setInterval(%22popup_('%22%20%2B%20pDiv%20%2B%20%22')%22%2C10)%3B%20%0D%0A%20%7D%20%0D%0A%20%20%0D%0A%20popup_%20%3D%20function(pDivId)%7B%20%0D%0A%20%20%20%0D%0A%20%20%20%0D%0A%20%20pObj%20%3D%20aniObjs%5BpDivId%5D%3B%20%0D%0A%20%20%20%0D%0A%20%20var%20w%20%3D%20parseInt(pObj.obj.style.width)%3B%20%0D%0A%20%20var%20h%20%3D%20parseInt(pObj.obj.style.height)%3B%20%0D%0A%20%20%20%20%20%20%0D%0A%20%20if(w%20%3E%3D%20pObj.targetSize.w%20%26%26%20h%20%3E%3D%20pObj.targetSize.h)%7B%20%0D%0A%20%20%20clearInterval(pObj.interval)%3B%20%0D%0A%20%20%20if(document.all)%20%0D%0A%20%20%20%20pObj.obj.style.filter%20%3D%20%22Alpha(opacity%3D%22%20%2B%20pObj.alpha.e%20%2B%20%22)%22%3B%20%0D%0A%20%20%20else%20%0D%0A%20%20%20%20pObj.obj.style.opacity%20%3D%20pObj.alpha.e%20%2F%20100%3B%20%0D%0A%20%20%20delete%20aniObjs%5BpObj.obj.id%5D%3B%20%0D%0A%20%20%7Delse%7B%20%0D%0A%20%20%20if(w%20%3C%20pObj.targetSize.w)%20%20%0D%0A%20%20%20%20w%20%2B%3D%20pObj.step.x%3B%20%0D%0A%20%20%20if(h%20%3CpObj.targetSize.h)%20%0D%0A%20%20%20%20h%20%2B%3D%20pObj.step.y%3B%20%0D%0A%20%20%20if(document.all)%7B%20%0D%0A%20%20%20%20var%20pattern%20%3D%20%2Fopacity%3D(%5Cd%7B1%2C3%7D)%2F%3B%20%0D%0A%20%20%20%20var%20result%20%3D%20pattern.exec(pObj.obj.style.filter)%3B%20%0D%0A%20%20%20%20if(result%20!%3D%20null)%7B%20%0D%0A%20%20%20%20%20if(result%5B1%5D%20%3C%20pObj.alpha.e)%20%0D%0A%20%20%20%20%20%20pObj.obj.style.filter%20%3D%20%22Alpha(opacity%3D%22%20%2B%20(result%5B1%5D%20%2B%20pObj.alpha.t)%20%2B%20%22)%22%20%0D%0A%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20pObj.obj.style.filter%20%3D%20%22Alpha(opacity%3D%22%20%2B%20pObj.alpha.e%20%2B%20%22)%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20if(pObj.obj.style.opacity%20%3C%20pObj.alpha.e%20%2F%20100)%7B%20%0D%0A%20%20%20%20%20pObj.obj.style.opacity%20%3D%20parseFloat(pObj.obj.style.opacity)%20%2B%20pObj.alpha.t%20%2F%20100%3B%20%0D%0A%20%20%20%20%7Delse%20%0D%0A%20%20%20%20%20pObj.obj.style.opacity%20%3D%20pObj.alpha.e%20%2F%20100%3B%20%0D%0A%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%20%20%20%0D%0A%20%20pObj.obj.style.width%20%3D%20w%20%2B%20%22px%22%3B%20%0D%0A%20%20pObj.obj.style.height%20%3D%20h%20%2B%20%22px%22%3B%20%0D%0A%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Avar%20ani%20%3D%20new%20JAni()%3B%20%0D%0A%20ani.popup(%20%0D%0A%20%20%20%20%22apDiv1%22%2C%20%0D%0A%20%20%20%20%7Bw%3A50%2Ch%3A50%7D%2C%20%2F%2F%E5%88%9D%E5%A7%8B%E9%95%BF%E5%AE%BD%20%0D%0A%20%20%20%20%7Bw%3A200%2Ch%3A500%7D%2C%20%2F%2F%E7%9B%AE%E6%A0%87%E9%95%BF%E5%AE%BD%20%0D%0A%20%20%20%20%7Bx%3A8%2Cy%3A8%7D%2C%20%20%2F%2F%E6%AD%A5%E9%95%BF%20%0D%0A%20%20%20%20%7Bs%3A10%2Ce%3A80%2Ct%3A10%7D%2F%2F%E9%80%8F%E6%98%8E%E5%BA%A6%20%E8%B5%B7%E5%A7%8B%EF%BC%8C%E7%BB%93%E6%9D%9F%EF%BC%8C%E6%AD%A5%E9%95%BF%20%0D%0A%20%20%20%20)%3B%20%0D%0A%20%20%20%20%20%0D%0A%20ani.popup(%20%0D%0A%20%20%20%20%22apDiv2%22%2C%20%0D%0A%20%20%20%20%7Bw%3A30%2Ch%3A50%7D%2C%20%2F%2F%E5%88%9D%E5%A7%8B%E9%95%BF%E5%AE%BD%20%0D%0A%20%20%20%20%7Bw%3A400%2Ch%3A400%7D%2C%20%2F%2F%E7%9B%AE%E6%A0%87%E9%95%BF%E5%AE%BD%20%0D%0A%20%20%20%20%7Bx%3A8%2Cy%3A8%7D%2C%20%20%2F%2F%E6%AD%A5%E9%95%BF%20%0D%0A%20%20%20%20%7Bs%3A10%2Ce%3A80%2Ct%3A2%7D%2F%2F%E9%80%8F%E6%98%8E%E5%BA%A6%20%E8%B5%B7%E5%A7%8B%EF%BC%8C%E7%BB%93%E6%9D%9F%EF%BC%8C%E6%AD%A5%E9%95%BF%20%0D%0A%20%20%20%20)%3B%20%0D%0A%20%20%20%20%20%0D%0A%20ani.popup(%20%0D%0A%20%20%20%20%22apDiv3%22%2C%20%0D%0A%20%20%20%20%7Bw%3A10%2Ch%3A10%7D%2C%20%2F%2F%E5%88%9D%E5%A7%8B%E9%95%BF%E5%AE%BD%20%0D%0A%20%20%20%20%7Bw%3A200%2Ch%3A500%7D%2C%20%2F%2F%E7%9B%AE%E6%A0%87%E9%95%BF%E5%AE%BD%20%0D%0A%20%20%20%20%7Bx%3A8%2Cy%3A8%7D%2C%20%20%2F%2F%E6%AD%A5%E9%95%BF%20%0D%0A%20%20%20%20%7Bs%3A10%2Ce%3A80%2Ct%3A10%7D%2F%2F%E9%80%8F%E6%98%8E%E5%BA%A6%20%E8%B5%B7%E5%A7%8B%EF%BC%8C%E7%BB%93%E6%9D%9F%EF%BC%8C%E6%AD%A5%E9%95%BF%20%0D%0A%20%20%20%20)%3B%20%20%20%20%20%20%20%20%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程