触屏特效插件touchScroll

来源:互联网 发布:gcbi数据库 编辑:程序博客网 时间:2024/05/29 02:56

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是为了模拟移动设备的高度


完成后的效果:






0 0