页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容对象移动

JS控制对象移动效果

发布：dxy 字体：[增加减小] 类型：转载

用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 全选提示:你可先修改部分代码,再按运行]

Tags：js 对象移动

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开
下一篇文章：js实例入门(简单展开或关闭)

·在百度中搜索关于“JS控制对象移动效果相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

JS控制对象移动效果

文章评论

同类文章

最近更新

热点排行

JS控制对象移动效果

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行