前言

TouchSlide 可以说是 SuperSlide 手机简化版，不同的地方在于：
1、TouchSlide是纯javascript开发的，不依赖任何js库，鉴于此，TouchSlide调用方法和SuperSlide有点不同。
调用方法为：TouchSlide({slideCell:"#slider",effect:"leftLoop"});（slideCell必须为id对象）;同样效果，SuperSlide调用方法为：jQuery("#slider").slide({ effect:"leftLoop" });
2、为了方便使用，我用js模拟了简单的jQuery选择器，只支持“#”“.”“标签名称”，用空格隔开。除了slideCell必须用id选择器外，其它titCell等都可以使用，例如：titCell:".title li"
3、除了上述2个不同，其它是一致的，想了解更多可以下载demo研究。

1、引用TouchSlide.js

具体路径自行设置。

1
2
3
4
<head>
    <script type="text/javascript" src="../TouchSlide.1.0.js"></script>
</head>

2、编写HTML

以下是默认的HTMl结构，分别是 ".hd" 里面包含ul， ".bd" 里面包含ul

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="leftTabBox" class="tabBox">
    <div class="hd">
        <ul>
            <li>国内</li>
            <li>国际</li>
            <li>时事</li>
        </ul>
    </div>
    <div class="bd">
            <ul>
                <li><a href="#">官方明确感染H7N9高危人群</a></li>
                ...
            </ul>
            <ul>
                <li><a href="#">日:沈阳军区部队开赴中朝边境</a></li>
                ...
            </ul>
            <ul>
                <li><a href="#">农业占GDP低政府支持力度大</a></li>
                ...
            </ul>
    </div>
</div>

3、编写CSS，为HTML赋予样色

因为现在大部分手机浏览器都支持 html5，所以你的css兼容chrome就无大问题了

1
2
3
4
5
6
7
.tabBox .hd{ height:40px; line-height:40px; padding:0 10px; font-size:20px; background:#f4f4f4; border-bottom:1px solid #F5AB38; position:relative;  }
.tabBox .hd ul{ position:absolute; height:41px; top:0; overflow:hidden;  }
.tabBox .hd ul li{ float:left; padding:0 10px; color:#666;  }
.tabBox .hd ul .on{ border:2px solid #F5AB38; border-bottom-color:#fff; background:#fff; color:#CF7F21;   }
.tabBox .bd ul{ padding:10px 0 10px 10px;  }
.tabBox .bd li{ height:33px; line-height:33px;   }
.tabBox .bd li a{ color:#666;  }

4、调用TouchSlide

在本例中，请在 “.tabBox” div结束后立刻调用 TouchSlide，这样会得到最好的效果，避免整个页面加载后再调用 TouchSlide；
因为是默认HTML结构，所以参数都为默认值，不用填写titCell、mainCell等。

官方网站：http://www.superslide2.com/

黄聪：手机移动端建站Jquery+CSS3+HTML5触屏滑动特效插件、实现触屏焦点图、图片轮展图的更多相关文章

  1. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  2. jquery+css3打造一款ajax分页插件

    原文:[原创]jquery+css3打造一款ajax分页插件 最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认 ...

  3. 【JavaScript&jQuery】轮展图

    用bootstrap实现轮展图和用Jquery自定义轮展图两种   1.使用bootstrap插件 效果图: 用一个超简单的方法,那就是用bootstrap的插件,什么?不懂bootstrap?没关系 ...

  4. 基于jQuery/CSS3实现拼图效果的相册插件

    今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图 ...

  5. 《黄聪:手机移动站SEO优化教程》2、PC端和手机移动端SEO优化区别

    视频地址:http://v.youku.com/v_show/id_XNzE2ODcxNjM2.html

  6. 《黄聪:手机移动站SEO优化教程》1、为什么要做手机移动端网站

    视频地址:http://v.youku.com/v_show/id_XNzE2Mzk3MjI4.html

  7. 《黄聪:手机移动站SEO优化教程》4、如何实现手机移动网站和PC站点的自主适配

    视频地址:http://www.tudou.com/programs/view/v4Hur5vjav4/ 1.自主适配 A:站点自己做好PC与手机之间的适配,以及手机站各个版式之间的适配.当手机用户通 ...

  8. 黄聪：WebBrowser执行和安装jQuery脚本（IEBrowse）

    上一文章说明了如何让 js 脚本访问 .NET 中的类, 这次希望给大家说明一下在任意页面中安装 jQuery 脚本, 并操作页面上的元素. 其实在第一篇关于 IEBrowser 的文章当中, 已经有 ...

  9. 黄聪：Discuz自制模板带jquery时与discuz本身冲突解决办法

    由于JQuery的效果很好,在制作模板时难免会用到各种jquery效果.可是做过模板的人就会发现加上自己的juery代码后,discuz自带的一些下拉功能就不可以使用了,其实原因就是discuz和JQ ...

随机推荐

  1. 转：bash: /dev/null: Permission denied

    普通用户登录:bash: /dev/null: Permission denied 2012-12-07 16:01:36|  分类: linux |举报 |字号 订阅     Last login: ...

  2. No module named 'pkg_resources' 解决方法

    不知什么原因pip3突然不好使了....下午apt-get install && pip3 install 了好多东西,具体什么原因也找不出个所以然. 执行pip3报错: Traceb ...

  3. Apache运行模式

    Apache 2.X 支持插入式并行处理模块,称为多路处理模块(MPM: Multi-Processing Modules).在编译apache时必须选择也只能选择一个MPM,对类UNIX系统,有几个 ...

  4. JS版百度地图API

    地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...

  5. Java——线程间通信问题

     wait和sleep区别: 1.wait可以指定时间可以不指定.     sleep必须指定时间. 2.在同步时,对cpu的执行权和锁的处理不同.     wait:释放执行权,释放锁.     ...

  6. 关于MSP430中断机制

    中断很大程度上体现了一款单片机的性能,从这一点将MSP430在中断方面做得很不错,主要是提供了非常丰富的中断源,基本的有IO中断,定时器中断和一些接口中断(SPI,UART,I2C)等等.     现 ...

  7. 【转】win7 uac关闭

    方法1: 原文网址:http://jingyan.baidu.com/article/c275f6bae2650ce33d756795.html 首先点击开始,并在输入框中输入“MSCONFIG”,打 ...

  8. EDIUS和VEGAS哪个更好用

    随着数字化电视系统发展的步伐日趋加快,计算机技术逐步渗透到广播电视的各个领域,非线性编辑系统在广播电视行业内占据越来越重要的地位,而且正向多样化 发展.因此,非线性编辑技术的操作应用对于编辑人员有着非 ...

  9. 关于checkbox的attr无效的问题

    jq用了10版本的,一直发现attr无效,查找良久,由同事帮忙解决该问题,感谢. 特记录下该问题. 由于 新版本attr换成了prop的问题. $("input[name='delIds'] ...

  10. 09 Mysql数据库在Linux下的使用

    1. 创建数据库 1.1 启动Mysql [root@localhost ~]# mysql -h127.0.0.1 -uroot -pmysql Warning: Using a password ...