资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JS控制对象移动效果
<!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=gb2312" /> <title>活动的展示窗</title> <style type="text/css"> #box{width:500px;height:120px;border:#00FF00 10px ridge;overflow:hidden} .bigbox{overflow:hidden;} .smallbox{width:auto!important width:140px;min-width:140px;height:100px;border:#FFFF00 8px ridge;float:left;display:inline;overflow:visible;} </style> <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%0Avar%20box%2CscrollIndex%3D0%2CsbArr%3Dnew%20Array()%3B%20%0D%0Afunction%20%24(id)%7Breturn%20document.getElementById(id)%7D%20%0D%0Awindow.onload%3Dfunction()%7B%20%0D%0A%20%20%20%20box%3D%24(%22box%22)%3B%20%0D%0A%20%20%20%20var%20bb%3Dbox.firstChild%3B%20%0D%0A%20%20%20%20var%20tmp%3Dbb.getElementsByTagName(%22div%22)%3B%20%0D%0A%20%20%20%20var%20allWidth%3D0%3B%20%0D%0A%20%20%20%20for%20(var%20n%3D0%3Bn%3Ctmp.length%3Bn%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(tmp%5Bn%5D.className%3D%3D%22smallbox%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20sbArr.push(tmp%5Bn%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20sbArr%5BsbArr.length-1%5D.scrollFlag%3DallWidth%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20allWidth%3DallWidth%2BsbArr%5BsbArr.length-1%5D.offsetWidth%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20resize(bb)%3B%20%0D%0A%7D%20%0D%0Afunction%20resize(o)%7B%20%0D%0A%20%20%20%20var%20width%3D0%2Cheight%3D0%3B%20%0D%0A%20%20%20%20for%20(var%20n%3D0%3Bn%3CsbArr.length%3Bn%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20width%3Dwidth%2BsbArr%5Bn%5D.offsetWidth%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(sbArr%5Bn%5D.offsetHeight%3Eheight)%20height%3DsbArr%5Bn%5D.offsetHeight%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20o.style.width%3Dwidth%2B%22px%22%3B%20%0D%0A%20%20%20%20o.style.height%3Dheight%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Afunction%20goPrevious()%7B%20%0D%0A%20%20%20%20if%20(--scrollIndex%3C0)%20scrollIndex%3D0%3B%20%0D%0A%20%20%20%20moveBox(sbArr%5BscrollIndex%5D.scrollFlag)%3B%20%0D%0A%7D%20%0D%0Afunction%20goNext()%7B%20%0D%0A%20%20%20%20if%20(sbArr%5BscrollIndex%2B1%5D.scrollFlag%3E%3Dbox.scrollWidth-box.clientWidth)%7B%20%0D%0A%20%20%20%20%20%20%20%20moveBox(box.scrollWidth-box.clientWidth)%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(box.scrollLeft!%3Dbox.scrollWidth-box.clientWidth)%20%2B%2BscrollIndex%3B%20%0D%0A%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(%2B%2BscrollIndex%3EsbArr.length-1)%20scrollIndex%3DsbArr.length-1%3B%20%0D%0A%20%20%20%20%20%20%20%20moveBox(sbArr%5BscrollIndex%5D.scrollFlag)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20moveBox(scrollFlag)%7B%20%0D%0A%20%20%20%20clearTimeout(box.getAttribute(%22ta%22))%3B%20%0D%0A%20%20%20%20if%20(Math.abs(scrollFlag-box.scrollLeft)%3C1)%7B%20%0D%0A%20%20%20%20%20%20%20%20box.scrollLeft%3DscrollFlag%3B%20%0D%0A%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20ta%3DparseInt((scrollFlag-box.scrollLeft)%2F8%2B1)%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(Math.abs(ta)%3C0.5)%20ta%3Dta%3E0%3F0.5%3A-0.5%3B%20%0D%0A%20%20%20%20%20%20%20%20box.scrollLeft%3Dbox.scrollLeft%2Bta%3B%20%0D%0A%20%20%20%20%20%20%20%20box.setAttribute(%22ta%22%2CsetTimeout(function()%7BmoveBox(scrollFlag)%7D%2C10))%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </head> <body> <div id="box"><div class="bigbox"> <div class="smallbox">content1</div> <div class="smallbox">content2</div> <div class="smallbox">content3</div> <div class="smallbox">content4</div> <div class="smallbox">content5</div> <div class="smallbox">content6</div> <div class="smallbox">content7</div> <div class="smallbox">content8</div> <div class="smallbox">content9</div> </div></div> <a onclick="goPrevious()" href="javascript:" _ewebeditor_ta_href="javascript%3A">左移</a> <a onclick="goNext()" href="javascript:" _ewebeditor_ta_href="javascript%3A">右移</a> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程