touchScroll可以模拟ipad 手机等的触屏效果
之前做手机网页用到 下面来介绍 插件下载
直接上代码:
<!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" />
<script src="touchScroll.js"></script>
<title>无标题文档</title>
<style>
#wrap{ width:300px; background:#FFC; height:100%; }
#wrap ul{ width:250px;list-style:none;background:#FFC;}
#wrap ul li{height:30px; margin-top:6px; float:left; background:#FCC; width:250px; text-align:center}
</style>
</head>
<body style=" height:300px;">
<div id="wrap">
<ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
<li>7777777</li>
<li>8888888</li>
<li>9999999</li>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
<li>7777777</li>
<li>8888888</li>
<li>9999999</li>
</ul>
<div style="clear:both"></div>
</div>
<script>
//实例化组建
var t1=new TouchScroll({id:'wrap','width':5,'opacity':0.7,color:'#555',minLength:20});
</script>
</body>
</html>
//ID为容器DIV的ID
width为滚动条的宽度 ,
opacity为滚动条透明度
color为颜色
minLength为滚动条最小长度
注意两个红色的样式 height:300px是为了模拟移动设备的高度
完成后的效果: