横向划屏

最新推荐文章于 2024-03-02 15:37:55 发布

hu_mouse

最新推荐文章于 2024-03-02 15:37:55 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/hu_mouse/article/details/47151625

版权

<!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.οnlοad=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>