触屏特效插件touchScroll

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


完成后的效果:






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值