JS控制对象移动效果_javascript技巧-js教程-PHP中文网

<!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> 
<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/188bet.php" ><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/188_120.gif"></a></div></div> <div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/manbetx.php"><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/wb600.gif"></a> </div></div> 
<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需刷新才能执行]

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

JS控制对象移动效果_javascript技巧

相关文章推荐

相关课程推荐

javascript初级视频教程

jquery 基础视频教程

javascript三级联动视频教程

独孤九贱(3)_JavaScript视频教程

独孤九贱(6)_jQuery视频教程

全部评论我要评论

PHP中文网