前言

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. jq事件冒泡问题

    在程序中使用事件对象非常简单,只需为函数添加一个参数,jquery代码如下: $("element").bind("click",function(event) ...

  2. 使用 rqt_console 和 roslaunch---8

    使用 rqt_console 和 roslaunch Description: 本教程介绍如何使用rqt_console和rqt_logger_level进行调试,以及如何使用roslaunch同时运 ...

  3. XML的解析方式(DOM、SAX、StAX)

    (新)  XML的解析方式(DOM.SAX.StAX) 博客分类: XML   一般来说,解析XML文件存在着两种方式,一种是event-based API,比如说象SAX,XNI. 第二种是tree ...

  4. 1-3 ISO/OSI七层模型详解

    一.物理层 1.负责设备之间的比特流的传输.物理接口.电气特性等. <1>物理接口:网线接口型号.音频线接口型号.视频线接口型号等 <2>电气特性:例如网线总共8根线,这8根线 ...

  5. IOS请求H5页面、要求自定义agent判断是电脑、安卓还是iPhone登录

    //自定制的userAgent- (void)createMyAgent{        NSString *userAgent = [[[UIWebView alloc]init]stringByE ...

  6. hdu5442（2015长春赛区网络赛1006）后缀数组+KMP /最小表示法？

    题意:给定一个由小写字母组成的长度为 n 的字符串,首尾相连,可以从任意一个字符开始,顺时针或逆时针取这个串(长度为 n),求一个字典序最大的字符串的开始字符位置和顺时针或逆时针.如果有多个字典序最大 ...

  7. 英语语法最终珍藏版笔记-17名词性-主语-宾语-同位语-表语-that从句

    名词性从句 在主从复合句中,从句可以充当主句的主语.表语.宾语或同位语.由于在多数情况下,主语.表语.宾语或同位语这四种句子成分由名词性词类充当,所以,我们把这些作用相当于名词的从句统称为名词性从句, ...

  8. 使用grep恢复被删除文件内容【转】

    http://www.cnblogs.com/ggjucheng/archive/2012/10/07/2714311.html Unix/Linux下,最危险的命令恐怕就属rm命令了,每次在root ...

  9. Heap Only Tuples (HOT)

    Introduction ------------ The Heap Only Tuple (HOT) feature eliminates redundant index entries and a ...

  10. SqlBulkCopy 批量插入数据库

    /// <summary> /// 批量插入 注:DT的tableName为要更新的数据库表名,DT的列名和数据库一致 /// </summary> /// <param ...