软件开发培训班 >> 编程开发 >> JavaScript

JS控制对象移动效果

　　本文标签：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> 
左移 
右移 
</body> 
</html>

技术文章快速查找

基于jquery的loading效果实现代码

js 表单验证方法(实用)

关于this和self的使用说明

js的.innerHTML = ""IE9下显示有错误的解决方法

JavaScript中的typeof操作符用法实例

AJAX跨域请求json数据的实现方法

在网站上应该用的30个jQuery插件整理

nodejs入门详解(多篇文章结合)

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建