您的位置：首页 > 其它

横向划屏

2015-07-30 16:03 267 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>iScroll demo: Event Passthrough</title>

<script type="text/javascript" src="../../build/iscroll.js"></script>

<script type="text/javascript">

var datalList=[

               {'title':'品牌一'},

               {'title':'品牌2'},

               {'title':'品牌一'},

               {'title':'品牌一'},

               {'title':'品牌一'}

           ];

function loaded () {

   var myScroll;

   myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });

}

function innerValue(){

   var str='';

   for(var i=0,j=datalList.length;i<j;i++){

           str+='<li>'+ datalList[i].title +'</li>';

   };

   document.getElementById('scroller').getElementsByTagName('ul')[0].innerHTML='';

   document.getElementById('scroller').getElementsByTagName('ul')[0].innerHTML=str;

   var oLiw=document.getElementById('scroller').getElementsByTagName('li')[0].offsetWidth;

   document.getElementById('scroller').style.width=oLiw*(datalList.length)+'px';

}

window.onload=function(){

   if(datalList.length>=4){

           innerValue();

           loaded();

   }else{

           innerValue();

           loaded();

   }

};

</script>

<style type="text/css">

* {

   -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

   box-sizing: border-box;

}

body,ul,li {

   padding: 0;

   margin: 0;

   border: 0;

}

body {

   font-size: 12px;

   font-family: ubuntu, helvetica, arial;

}

#wrapper {

   position: relative;

   z-index: 1;

   height: 160px;

   width: 100%;

   background: #ccc;

   overflow: hidden;

   -ms-touch-action: none;

}

#scroller {

   position: absolute;

   z-index: 1;

   -webkit-tap-highlight-color: rgba(0,0,0,0);

   width: 2400px;

   height: 160px;

   -webkit-transform: translateZ(0);

   -moz-transform: translateZ(0);

   -ms-transform: translateZ(0);

   -o-transform: translateZ(0);

   transform: translateZ(0);

   -webkit-touch-callout: none;

   -webkit-user-select: none;

   -moz-user-select: none;

   -ms-user-select: none;

   user-select: none;

   -webkit-text-size-adjust: none;

   -moz-text-size-adjust: none;

   -ms-text-size-adjust: none;

   -o-text-size-adjust: none;

   text-size-adjust: none;

}

#scroller ul {

   list-style: none;

   width: 100%;

   padding: 0;

   margin: 0;

}

#scroller li {

   width: 120px;

   height: 160px;

   float: left;

   line-height: 160px;

   border-right: 1px solid #ccc;

   border-bottom: 1px solid #ccc;

   background-color: #fafafa;

   font-size: 14px;

   overflow: hidden;

   text-align: center;

}

p {

   font-size: 16px;

   padding: 1.2em;

   line-height: 200%;

}

</style>

</head>

<body>

<div id="wrapper">

   <div id="scroller">

       <ul></ul>

   </div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航