资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
图片的左右移动，js动画效果实现代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>图片的左右移动，动画效果的实现</title> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20LANGUAGE%3D%22JavaScript%22%3E%3C!--%20%0D%0Astep%20%3D%200%3B%20%0D%0Aobj%20%3D%20new%20Image()%3B%20%0D%0Afunction%20anim(xp%2Cxk%2Csmer)%20%0D%0A%7B%20%0D%0Aobj.style.left%20%3D%20x%3B%20%0D%0Ax%20%2B%3D%20step*smer%3B%20%0D%0Aif%20(x%3E%3D(xk%2Bxp)%2F2)%20%7B%20%0D%0Aif%20(smer%20%3D%3D%201)%20step--%3B%20%0D%0Aelse%20step%2B%2B%3B%20%0D%0A%7D%20%0D%0Aelse%20%7B%20%0D%0Aif%20(smer%20%3D%3D%201)%20step%2B%2B%3B%20%0D%0Aelse%20step--%3B%20%0D%0A%7D%20%0D%0Aif%20(x%20%3E%3D%20xk)%20%7B%20%0D%0Ax%20%3D%20xk%3B%20%0D%0Asmer%20%3D%20-1%3B%20%0D%0A%7D%20%0D%0Aif%20(x%20%3C%3D%20xp)%20%7B%20%0D%0Ax%20%3D%20xp%3B%20%0D%0Asmer%20%3D%201%3B%20%0D%0A%7D%20%0D%0AsetTimeout('anim('%2Bxp%2B'%2C'%2Bxk%2B'%2C'%2Bsmer%2B')'%2C%2050)%3B%20%0D%0A%7D%20%0D%0Afunction%20moveLR(objID%2Cmovingarea_width%2Cc)%20%0D%0A%7B%20%0D%0Aif%20(navigator.appName%3D%3D%22Netscape%22)%20window_width%20%3D%20window.innerWidth%3B%20%0D%0Aelse%20window_width%20%3D%20document.body.offsetWidth%3B%20%0D%0Aobj%20%3D%20document.images%5BobjID%5D%3B%20%0D%0Aimage_width%20%3D%20obj.width%3B%20%0D%0Ax1%20%3D%20obj.style.left%3B%20%0D%0Ax%20%3D%20Number(x1.substring(0%2Cx1.length-2))%3B%20%0D%0Aif%20(c%20%3D%3D%200)%20%7B%20%0D%0Aif%20(movingarea_width%20%3D%3D%200)%20%7B%20%0D%0Aright_margin%20%3D%20window_width%20-%20image_width%3B%20%0D%0Aanim(x%2Cright_margin%2C1)%3B%20%0D%0A%7D%20%0D%0Aelse%20%7B%20%0D%0Aright_margin%20%3D%20x%20%2B%20movingarea_width%20-%20image_width%3B%20%0D%0Aif%20(movingarea_width%20%3C%20x%20%2B%20image_width)%20window.alert(%22No%20space%20for%20moving!%22)%3B%20%0D%0Aelse%20anim(x%2Cright_margin%2C1)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aelse%20%7B%20%0D%0Aif%20(movingarea_width%20%3D%3D%200)%20right_margin%20%3D%20window_width%20-%20image_width%3B%20%0D%0Aelse%20%7B%20%0D%0Ax%20%3D%20Math.round((window_width-movingarea_width)%2F2)%3B%20%0D%0Aright_margin%20%3D%20Math.round((window_width%2Bmovingarea_width)%2F2)-image_width%3B%20%0D%0A%7D%20%0D%0Aanim(x%2Cright_margin%2C1)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%3C%2Fscript%3E"> </head> <body> <a href="/" _ewebeditor_ta_href="%2F" target="_blank"> <img src="/images/logo.gif" _ewebeditor_ta_src="%2Fimages%2Flogo.gif" name="picture" style="position: absolute; top: 70px; left: 30px;" BORDER="0"> </a> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20LANGUAGE%3D%22JavaScript%22%3E%3C!--%20%0D%0AsetTimeout(%22moveLR('picture'%2C300%2C1)%22%2C10)%3B%20%0D%0A%2F%2F--%3E%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程