技术与研发中心

网站建设/网页设计
热线:15906773903
首页 -> 技术与研发中心

    手机端图片滚动效果

    发布时间:2013-11-28 浏览次数:2444
    javascript部分

    \/*
    function topic(obj){
    C = this;
    C.arg = obj;
    C.id = C.arg.id;
    C.innerWarp=C.id.getElementsByTagName_r(obj.tag)['0'];
    C.inhtml=[]
    C.creatHTML();
    C.current=0; //当前展示的图片
    //测试添加事件
    C.arg.left.addEventListener('click',function(){
    C.scroll('l')
    },false);
    C.arg.right.addEventListener('click',function(){
    C.scroll('r')
    },false)

    }

    topic.prototype={
    creatHTML:function(){
    objData= C.arg.data;
    C.innerWarp.style.width = objData.length+'00%';
    for(var i=0;i{
    C.inhtml.push('\''+objData[i]['alt']+'\'');
    }
    C.innerWarp.innerHTML = C.inhtml.join('');
    C.touchFN();
    } ,
    applyStyle:function(node, properties){
    var p, s = node.style;
    for (p in properties){
    s[p] = properties[p];
    }
    },

    animal:function(){
    warpLeft = parseInt(C.current)*320;
    C.applyStyle(C.innerWarp, {
    "-webkit-transition-duration": '400ms',
    "-webkit-transition-timing-function": 'ease-out-in'
    });
    C.innerWarp.style['-webkit-transform']='translate3d('+warpLeft+'px,0,0)';

    },

    scroll:function(dir){
    if(dir=='r'&&Math.abs(C.current)>0){
    C.current++;
    }else if(dir=='l'&&Math.abs(C.current)
    C.current--;
    }else{
    //alert('出错了吧。看看你点坏了是不?')
    }
    C.animal();
    },

    touchFN:function(){
    var startPos,moverPos,divStartpos;
    C.innerWarp.addEventListener('touchstart',function(e){
    //触摸开始位置
    startPos=parseInt(e.touches['0'].pageX)
    var transform = C.innerWarp.style['-webkit-transform']?C.innerWarp.style['-webkit-transform']:'translate3d(0px,0,0)';
    var translate3dLeft = transform.substring(transform.indexOf('(')+1,transform.indexOf(',')) ;
    //将动画效果清除为无;
    C.applyStyle(C.innerWarp, {
    "-webkit-transition-duration": '',
    "-webkit-transition-timing-function": ''
    });
    divStartpos =parseInt(translate3dLeft) ;
    },false);

    C.innerWarp.addEventListener('touchmove',function(e){
    //触摸移动位置
    moverPos = startPos - parseInt(e.touches['0'].pageX);
    C.innerWarp.style['-webkit-transform']='translate3d('+(divStartpos - moverPos)+'px,0,0)';
    e.preventDefault();
    },false);
    C.innerWarp.addEventListener('touchend',function(e){
    if(Math.abs(moverPos)>50){
    C.scroll(moverPos>0?'l':'r')
    }else{
    C.animal();
    }
    },false);

    }
    }

    var app ={
    id:document.querySelector('#scroll'),
    tag:'div',
    left:document.querySelector('#leftnav'),
    right:document.querySelector('#rightnav'),
    data:[
    {
    'url':'http://117.34.6.189/info/images/2012/4/133369506327612472.jpg',
    'link':'#1',
    'alt':'威邦网络科技企业官网建设'
    },
    {
    'url':'http://117.34.6.189/info/images/2012/4/133368021561231988.jpg',
    'link':'#2',
    'alt':'威邦网络科技手机APP网络建设'
    },

    {
    'url':'http://117.34.6.189/info/images/2012/4/133366915945072193.jpg',
    'link':'#3',
    'alt':'威邦网络科技虚拟主机'
    }, {
    'url':'http://117.34.6.189/info/images/2012/4/133369506327612472.jpg',
    'link':'#1',
    'alt':'威邦网络科技域名注册'
    },
    {
    'url':'http://117.34.6.189/info/images/2012/4/133368021561231988.jpg',
    'link':'#2',
    'alt':'威邦网络科技企业邮局'
    },
    {
    'url':'http://117.34.6.189/info/images/2012/4/133366915945072193.jpg',
    'link':'#3',
    'alt':'威邦网络科技SEO优化'
    },

    {
    'url':'http://117.34.6.189/info/images/2012/4/133367099213623198.jpg',
    'link':'#4',
    'alt':'威邦网络科技淘宝网店装修'
    }
    ]
    }
    new topic(app);

    /\/*]]*\/

    CSS部分

    #scroll{background:#ddd;width:320px;overflow:hidden;height:170px;}
    #scroll div{height:140px;width:400%;-webkit-transition-property: -webkit-transform;}
    #scroll img,#scroll img{float:left;}

    HTML 部分
    <div id='scroll' >
        <div style='left:0px'>   
        </div>
         <a href="javascript:void('0')" id='rightnav'>《《《《《《《《《</a>  ||
         <a href="javascript:void('0')" id='leftnav'>》》》》》》》》》</a>
    </div>


    新一篇:移动站到底怎么做才能从搜索引擎获取更多流量?
    旧一篇:为什么要建WAP手机网站?
资讯 / News
招聘 / Job
案例 / Case
简介 / About

© 2010-2018 cnwei.net All Rights Reserved.
灵璧楚汉网络
Server 服务项目
商业二维码+手机网站
淘宝网店装修
企业官网建设
网络营销推广优化
虚拟主机
域名注册
企业邮箱
技术与研发中心
移动站到底怎么做才能从搜索引擎获取更多流量?
手机端图片滚动效果
js判断手机访问直接跳转手机版网站
为什么要建WAP手机网站?
手机网站seo优化的注意事项都有哪些?
智能手机网站,一键功能,全面提升客户行动力
CSS+DIV网站优化(seo)
关注微信 / 微博
灵璧楚汉网络
微博 /
RSS /
微信号:cnwei-net /
QQ / 点击这里给我发消息点击这里给我发消息