admin
管理员
管理员
  • UID1
  • 粉丝2
  • 关注2
  • 发帖数339
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:2914回复:0

【JavaScript从练习开始】面向对象无缝滚动、四方向、悬停、左右

楼主#
更多 发布于:2013-08-16 16:31
分享到:
先做一个简单的无缝滚动,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 无缝滚动 </title>
<style type="text/css">
    * { margin: 0; padding: 0; }
    li { list-style: none ; width: 200px; height: 200px; background-color: #ccc; font: 20px/200px 'microsoft yahei'; text-align: center;}
    .box { margin: 0 auto;}
 
    /*必须样式,box宽高视实际情况而定*/
    .box { position: relative; overflow: hidden; width: 200px; height: 200px; }
    .boxInner { position: absolute; top: 0; left: 0;}
    .boxInner li { float: left; }
</style>
</head>
<body>
<div id="oBox" class="box">
    <ol class="boxInner">
        <!-- 这里是要滚动的内容 -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>
 
<script type="text/javascript">
//by 小鱼,2013/08/15
window.onload = function (){
    //选择元素
    var oBox = document.getElementById("oBox"),
        oBoxInner = oBox.getElementsByTagName("ol")[0],
        aList = oBoxInner.getElementsByTagName("li"),
        timer = null,
        iSpeed = -10;
    oBoxInner.innerHTML += oBoxInner.innerHTML;
 
    //注意,需要加上单位px
    oBoxInner.style.cssText = "width:"+aList.length*aList[0].offsetWidth + 'px'+"; height:"+aList[0].offsetHeight + 'px'+";";
 
    //开定时器,并且清空上一次的定时器
    clearInterval(timer);
    timer = setInterval(fnRoll, 30);
    function fnRoll() {
        //自增或自减
        oBoxInner.style.left = oBoxInner.offsetLeft+iSpeed+'px';
        if(oBoxInner.offsetLeft<-oBoxInner.offsetWidth/2) {
            oBoxInner.style.left = '0px';
        } else if(oBoxInner.offsetLeft>=0) {
            oBoxInner.style.left = -oBoxInner.offsetWidth/2+'px';
        }
    }
}
</script>
</body>
</html
总是滚动,不能停止!有木有觉得少点什么呢?好吧,我们给加个移入悬停...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 无缝滚动,悬停 </title>
<style type="text/css">
    * { margin: 0; padding: 0; }
    li { list-style: none ; width: 200px; height: 200px; background-color: #ccc; font: 20px/200px 'microsoft yahei'; text-align: center;}
    .box { margin: 0 auto;}
 
    /*必须样式,box宽高视实际情况而定*/
    .box { position: relative; overflow: hidden; width: 200px; height: 200px; }
    .boxInner { position: absolute; top: 0; left: 0;}
    .boxInner li { float: left; }
</style>
</head>
<body>
<div id="oBox" class="box">
    <ol class="boxInner">
        <!-- 这里是要滚动的内容 -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>
 
<script type="text/javascript">
//by 小鱼,2013/08/15
window.onload = function (){
    //选择元素
    var oBox = document.getElementById("oBox"),
        oBoxInner = oBox.getElementsByTagName("ol")[0],
        aList = oBoxInner.getElementsByTagName("li"),
        timer = null,
        iSpeed = -10;
    oBoxInner.innerHTML += oBoxInner.innerHTML;
 
    //注意,需要加上单位px
    oBoxInner.style.cssText = "width:"+aList.length*aList[0].offsetWidth + 'px'+"; height:"+aList[0].offsetHeight + 'px'+";";
 
    //开定时器,并且清空上一次的定时器
    clearInterval(timer);
    timer = setInterval(fnRoll, 30);
    function fnRoll() {
        //自增或自减
        oBoxInner.style.left = oBoxInner.offsetLeft+iSpeed+'px';
        if(oBoxInner.offsetLeft<-oBoxInner.offsetWidth/2) {
            oBoxInner.style.left = '0px';
        } else if(oBoxInner.offsetLeft>=0) {
            oBoxInner.style.left = -oBoxInner.offsetWidth/2+'px';
        }
    }
 
    //鼠标放上去停止,移走继续滚动
    oBox.onmouseover = function (){clearInterval(timer);};
    oBox.onmouseout = function (){timer = setInterval(fnRoll,30)};
}
</script>
</body>
</html>
我们把滚动封装一下,并且实现多个方向,多个滚动,并且有按钮能控制方向!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 四方向无缝滚动,左右方向,悬停 </title>
<style type="text/css">
    /* 自定义样式 */
    * { margin: 0; padding: 0; }
    li { list-style: none ; width: 200px; height: 200px; background-color: #ccc; font: 20px/200px 'microsoft yahei'; text-align: center;}
    .oBox_l,.oBox_r { float: left; width: 50px; height: 50px; border: 1px #000 solid; text-align: center; font: 14px/50px 'microsoft yahei';}
    .oBox_r { margin-left: 96px;}
 
    /*必须样式,box宽高视实际情况而定*/
    .box { position: relative; overflow: hidden; width: 200px; height: 200px; }
    .boxInner { position: absolute; top: 0; left: 0;}
    .boxInner li { float: left; }
 
</style>
</head>
<body>
<div id="oBox" class="box">
    <ol class="boxInner">
        <!-- 这里是要滚动的内容 -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>
 
<script type="text/javascript">
//by 小鱼,2013/08/15
window.onload = function (){
    //选择元素,默认结构div>ol>li
 
    //obj 必选
    //sDirection 可选 h横向,v竖向,默认横向h
    //oInner 可选,默认ol
    //alist 可选,默认li
    //iSpeed 可选(number) 正向右/下,负向左/上,默认横向向左,竖向向上
    //sButs 可选(bool) 是否需要左右按钮,默认无
 
    //注意,有按钮时,按钮是添加在obj父级下的
    new Rolling({obj:'oBox',sDirection:'h', sButs:true});
};
Rolling.prototype.fnRoll = function() {
    //自增或自减
    this.oInner.style[this.attr[0]] = this.oInner[this.attr[1]]+this.iSpeed+'px';
    if(this.oInner[this.attr[1]]<-this.oInner[this.attr[2]]/2) {
        this.oInner.style[this.attr[0]] = '0px';
    } else if(this.oInner[this.attr[1]]>=0) {
        this.oInner.style[this.attr[0]] = -this.oInner[this.attr[2]]/2+'px';
    }
};
//事件绑定
Rolling.prototype.Events = {
    bindEvent : function (obj, ev, fn){obj.attachEvent?obj.attachEvent('on'+ev, fn):obj.addEventListener(ev, fn, false)},
};
function Rolling(conf){
    var _this = this;
    this.timer = null;
    this.iSpeed = conf.iSpeed || -10;
    this.obj = document.getElementById(conf.obj);
    this.oInner = conf.oInner || this.obj.getElementsByTagName("ol")[0];
    this.alist = conf.alist || this.oInner.getElementsByTagName("li");
    this.direction = conf.sDirection || 'h';
    this.attr = [];
    this.buts = conf.sButs;
 
    //复制要滚动的内容
    this.oInner.innerHTML += this.oInner.innerHTML;
 
    //注意,需要加上单位px
    if(this.direction == 'h'){
        this.attr = ["left", "offsetLeft", "offsetWidth"];
        this.oInner.style.cssText = "width:"+this.alist.length*this.alist[0].offsetWidth + 'px'+"; height:"+this.alist[0].offsetHeight + 'px'+";";
    }else if (this.direction == 'v'){
        this.attr = ["top", "offsetTop", "offsetHeight"];
        this.oInner.style.cssText = "width:"+ this.alist[0].offsetWidth + 'px'+"; height:"+this.alist.length*this.alist[0].offsetHeight + 'px'+";";
    }
 
    //开定时器,并且清空上一次的定时器
    clearInterval(this.timer);
    this.timer = setInterval(function(){
        _this.fnRoll();
    }, 30);
 
    //鼠标放上去停止,移走继续滚动
    Rolling.prototype.Events.bindEvent(this.obj, 'mouseover', function(){clearInterval(_this.timer);});
    Rolling.prototype.Events.bindEvent(this.obj, 'mouseout', function(){
        _this.timer = setInterval(function(){
            _this.fnRoll();
        },30);
    });
 
    //按钮
    this.buts && (function(){
        var l = document.createElement("a"),
                lTxt = document.createTextNode("左"),
                r = document.createElement("a"),
                rTxt = document.createTextNode("右");
        //左
        l.appendChild(lTxt);
        l.className = conf.obj+'_l';
        _this.obj.parentNode.appendChild(l);
 
        //右
        r.appendChild(rTxt);
        r.className = conf.obj+'_r';
        _this.obj.parentNode.appendChild(r);
 
        //方向
        Rolling.prototype.Events.bindEvent(l, 'mouseover', function(){_this.iSpeed = -_this.iSpeed});
        Rolling.prototype.Events.bindEvent(r, 'mouseover', function(){_this.iSpeed = -_this.iSpeed});
    }());
}
</script>
</body>
</html>
游客

返回顶部