用jquery來實作類別似“網易新聞”橫向標題滑動的移動端頁面

標籤：

HTML:

<div id="navbar">                <div id=‘navbar_content‘ style="left:0px;">                    <div class="channel active">                        <span>shouye</span>                    </div>                    <div class="channel">                        <span>shouyeshouye</span>                    </div>                    <div class="channel">                        <span>shouyeshouyeshouyeshouyes</span>                    </div>                    <div class="channel">                        <span>shouye</span>                    </div>                    <div class="channel">                        <span>shouye</span>                    </div>                    <div class="channel">                        <span>shouye</span>                    </div>                    <div class="channel">                        <span>shouye</span>                    </div>                    <div class="channel">                        <span>shouye</span>                    </div>                    <div class="channel">                        <span>shouye</span>                    </div>                </div>            </div>        </div>

CSS:

#navbar{    background: rgba(247,247,247,0.95);    overflow: hidden;    position: relative;    text-align: center;    font-size: 1em;    padding-left: 5px;    line-height: 28px;}#navbar_content{    font-size: 1em;    text-align: left;    white-space: nowrap;    position: relative;}.channel{    vertical-align: top;    display: inline-block;    padding: 0 5px;    color: rgba(0,0,0,0.6);    font-weight: normal;    line-height: 26px;    border-bottom: 2px solid transparent;}.channel.active {    color: #1c88cd;    border-color: #1c88cd;}

JS:

 $(function(){        console.log($(‘#navbar‘).width())        var total_width=0;        var div_arr=$(‘.channel‘);        for(var i=0,len=div_arr.length;i<len;i++){            total_width+=div_arr[i].offsetWidth;        }        console.log(total_width);    var x,old_left;    $(‘#navbar_content‘)        .live(‘touchstart‘, function(e) {            console.log(e.originalEvent.pageX)            x = e.originalEvent.targetTouches[0].pageX // anchor point            old_left = parseInt(e.currentTarget.style.left);        })        .live(‘touchmove‘, function(e) {            var change = e.originalEvent.targetTouches[0].pageX - x;            e.currentTarget.style.left = (old_left+change)+"px";        })        .live(‘touchend‘, function(e) {            var left = parseInt(e.currentTarget.style.left);            var new_left;            var window_width=document.body.scrollWidth;            if (left < parseInt("-"+total_width)+$(‘#navbar‘).width()+100) {                new_left = "-"+(total_width-$(‘#navbar‘).width()+100);            }else if (left > 0) {                new_left = ‘0‘            }             $(e.currentTarget).animate({left: new_left}, 500);            e.currentTarget.style.left = new_left;                    });    });

 

用jquery來實作類別似“網易新聞”橫向標題滑動的移動端頁面