iScroll4插件的使用实例

来源：互联网发布：js如何修改元素属性值编辑：程序博客网时间：2024/05/16 17:50

原文网址：http://blog.csdn.net/freshlover/article/details/9790521

iScroll是Matteo Spinelli开发的一个滚动插件，使用原生js编写，其不依赖与任何js框架。iScroll 4 完全重写了iScroll这个框架的原始代码。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。目前正在开发iscroll5还未发布。iscroll 4.2版本兼容：iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.

除了旧版本的iScroll的特性以外，iScroll 4还包括如下的特性：

     （1）缩放（Pinch/Zoom）

    （2）拉动刷新（Pull up/down to refresh）

    （3）速度和性能提升

    （4）精确捕捉元素

    （5）自定义滚动条

我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{lanrain:$tpl.wxname}</title>
<base href="." />
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="{lanrain::RES}/css/allcss/cate{lanrain:$tpl.tpltypeid}_{lanrain:$tpl.color_id}.css" rel="stylesheet" type="text/css" />
<link href="{lanrain::RES}/css/107/iscroll.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{lanrain::RES}/css/flash/css/plugmenu.css">
<style>
#cate1 .mainmenu li .menubtn .menumesg {
padding: 0;
}
#cate1 .mainmenu li {
width: 33.3%;/*每个分类所占比例：一排2个就是50%*/
}
#cate1 .mainmenu li .menubtn {
margin: 8px 8px 0 0;/*外边距：可根据需求调整大小；4个数字，分别是上右下左*/
}

#cate1 .mainmenu {
padding: 0 0 8px 8px;/*内边距：可根据需求调整大小；4个数字，分别是上右下左*/
}
#cate1 .mainmenu li .menubtn {
border-radius: 6px;/*图片圆角，越大越圆*/
}
</style>
<script src="{lanrain::RES}/css/107/iscroll.js" type="text/javascript"></script>
<script type="text/javascript">
var myScroll;

function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function () {
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
}
});

}

document.addEventListener('DOMContentLoaded', loaded, false);
</script>

</head>

<body id="cate1">
<div class="banner">
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<volist name="flash" id="so">
<li><p>{lanrain:$so.info}</p><a href="{lanrain:$so.url}"><img src="{lanrain:$so.img}" /></a></li>
</volist>
</ul>
</div>
</div>
<div id="nav">
<div id="prev" onclick="myScroll.scrollToPage('prev', 0,400,3);return false">← prev</div>
<ul id="indicator">
<volist name="flash" id="so">
<li <if condition="$i eq 1">class="active"</if> >{lanrain:$i}</li>
</volist>

</ul>
<div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next →</div>
</div>
<div class="clr"></div>
</div>
<div id="insert1"></div>
<ul class="mainmenu">
<volist name="info" id="vo">
<li>
<div class="menubtn">
<a href="<if condition="$vo['url'] eq ''">{lanrain::U('Wap/Index/lists',array('classid'=>$vo['id'],'token'=>$vo['token']))}<else/>{lanrain:$vo.url|htmlspecialchars_decode}</if>">
<div class="menumesg">
<div class="menuimg"><img src="{lanrain:$vo.img}" /></div>
<div class="menutitle">{lanrain:$vo.name}</div>
</div>
</a>
</div>

</li>
</volist>

<div class="clr"></div>
</ul>
<script>
var count = document.getElementById("thelist").getElementsByTagName("img").length;

var count2 = document.getElementsByClassName("menuimg").length;
for(i=0;i<count;i++){
document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";

}
document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";

setInterval(function(){
myScroll.scrollToPage('next', 0,400,count);
},3500 );
window.onresize = function(){
for(i=0;i<count;i++){
document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";

}
document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
}

</script>

<div id="insert2"></div>
<div style="display:none"> </div>

<if condition="$showPlugMenu">
<div class="plug-div">
<div class="plug-phone">
<div class="plug-menu themeStyle" style="background:{lanrain:$homeInfo.plugmenucolor}"><span class="close"></span></div>
<volist name="plugmenus" id="vo">
<div class="themeStyle plug-btn plug-btn{lanrain:$i} close" style="background:{lanrain:$homeInfo.plugmenucolor}">
<a href="{lanrain:$vo.url}">
<span style="background-image: url({lanrain::RES}/css/flash/images/img/{lanrain:$vo.name}.png);" ></span>
</a>
</div>
</volist>
<div class="plug-btn plug-btn5 close"></div>
</div>
</div>
</if>
<script src="{lanrain::RES}/css/flash/js/zepto.min.js" type="text/javascript"></script>
<script src="{lanrain::RES}/css/flash/js/plugmenu.js" type="text/javascript"></script>
<div class="copyright">
<if condition="$iscopyright eq 1">
{lanrain:$homeInfo.copyright}
<else/>
{lanrain:$siteCopyright}
</if>
</div> </body></html>

0 0