首页 > 网络编程 > JavaScript > javascript技巧 > 对象移动

JS控制对象移动效果

2008-09-26 08:03:01 作者：

用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> 
<script language="javascript" type="text/javascript"> 
var box,scrollIndex=0,sbArr=new Array(); 
function $(id){return document.getElementById(id)} 
window.onload=function(){ 
    box=$("box"); 
    var bb=box.firstChild; 
    var tmp=bb.getElementsByTagName("div"); 
    var allWidth=0; 
    for (var n=0;n<tmp.length;n++){ 
        if(tmp[n].className=="smallbox"){ 
            sbArr.push(tmp[n]); 
            sbArr[sbArr.length-1].scrollFlag=allWidth; 
            allWidth=allWidth+sbArr[sbArr.length-1].offsetWidth; 
        } 
    } 
    resize(bb); 
} 
function resize(o){ 
    var width=0,height=0; 
    for (var n=0;n<sbArr.length;n++){ 
        width=width+sbArr[n].offsetWidth; 
        if (sbArr[n].offsetHeight>height) height=sbArr[n].offsetHeight; 
    } 
    o.style.width=width+"px"; 
    o.style.height=height+"px"; 
} 
function goPrevious(){ 
    if (--scrollIndex<0) scrollIndex=0; 
    moveBox(sbArr[scrollIndex].scrollFlag); 
} 
function goNext(){ 
    if (sbArr[scrollIndex+1].scrollFlag>=box.scrollWidth-box.clientWidth){ 
        moveBox(box.scrollWidth-box.clientWidth); 
        if (box.scrollLeft!=box.scrollWidth-box.clientWidth) ++scrollIndex; 
    }else{ 
        if (++scrollIndex>sbArr.length-1) scrollIndex=sbArr.length-1; 
        moveBox(sbArr[scrollIndex].scrollFlag); 
    } 
} 
function moveBox(scrollFlag){ 
    clearTimeout(box.getAttribute("ta")); 
    if (Math.abs(scrollFlag-box.scrollLeft)<1){ 
        box.scrollLeft=scrollFlag; 
    }else{ 
        var ta=parseInt((scrollFlag-box.scrollLeft)/8+1); 
        if (Math.abs(ta)<0.5) ta=ta>0?0.5:-0.5; 
        box.scrollLeft=box.scrollLeft+ta; 
        box.setAttribute("ta",setTimeout(function(){moveBox(scrollFlag)},10)); 
    } 
} 
</script> 
</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:">左移</a> 
<a onclick="goNext()" href="javascript:">右移</a> 
</body> 
</html>

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