前言

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. C#部分---语言经典题目——兔子生兔子

    根据本月成兔=上月成兔+上月小兔:本月小兔=上月幼兔:本月幼兔=本月成兔 利用while循环: Console.WriteLine("请输入月份:"); //int m = int ...

  2. HDU 2095 find your present (2)

    HDU 2095 find your present (2) 解法一:使用set 利用set,由于只有一个为奇数次,对一个数进行查询,不在集合中则插入,在集合中则删除,最后剩下的就是结果 /* HDU ...

  3. 创建kafkatopic和productor

    cd 到kafka 目录下 创建topic create topicbin/kafka-topics.sh --zookeeper spark1:2181,spark2:2181,spark3:218 ...

  4. 越狱Season 1-Episode 12:Odd Man Out

    Season 1-Episode 12:Odd Man Out -Sorry to keep you waiting. 抱歉让你等了半天 -Oh, it's, uh, not a problem. 嗯 ...

  5. Kali linux渗透测试的艺术 思维导图

    Kali Linux是一个全面的渗透测试平台,其自带的高级工具可以用来识别.检测和利用目标网络中未被发现的漏洞.借助于Kali Linux,你可以根据已定义的业务目标和预定的测试计划,应用合适的测试方 ...

  6. ExtJS Panel主要配置列表

    Ext.panel.Panel 属性 值 描述 animCollapse Boolean 设置面板折叠展开是否显示动画,Ext.Fx可用默认true,否则false applyTo Mixed 面板定 ...

  7. Android项目——电话拨号器

    因为应用要使用手机的电话服务,所以要在清单文件AndroidManifest.xml中添加电话服务权限: <?xml version="1.0" encoding=" ...

  8. 论文笔记之：Multiple Feature Fusion via Weighted Entropy for Visual Tracking

    Multiple Feature Fusion via Weighted Entropy for Visual Tracking ICCV 2015 本文主要考虑的是一个多特征融合的问题．如何有效的进 ...

  9. 3D知识补充

    Light Mapping = Dark Mapping (光照映射.黑暗映射) 本质上也是多贴一张图,他是做相乘操作.第2张纹理通常中间亮,外面暗.如果是简单的 Modulate,那么实际上所有像素 ...

  10. MiniCRT 64位 linux 系统移植记录：64位gcc的几点注意

    32位未修改源码与修改版的代码下载: git clone git@github.com:youzhonghui/MiniCRT.git MiniCRT 64位 linux 系统移植记录 MiniCRT ...