前言

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. JS的跨域问题

    1.什么是跨域? 跨域问题是由于javascript语言安全限制中的同源策略造成的. 2.什么是同源策略: 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议 ...

  2. tyvj1012 P1012 - 火柴棒等式 ——暴力枚举

    题目链接:https://www.tyvj.cn/Problem_Show.aspx?id=1012 可以发现:最大的数字绝对不超过999,只要枚举出0-999所有数字需要的火柴数,然后再枚举C和A, ...

  3. 第一篇TC界面设计

    TC界面设计方法 第一:确定自己最终界面的大小. 第二:根据功能需要,选择相应的控价. 第三:美化界面,对界面的控件调整布局位置,设置字体颜色设置背景图片等等 脚本代码: function 按钮1_点 ...

  4. web前端学习策略

  5. java多线程之：线程对象一些api

    一:wait()方法,wait(long timeout)--->锁对象调用wait()方法,让当前线程小a进入等待状态,阻塞住,并让出当先线程拥有的锁.--->直到其他线程用锁对象调用n ...

  6. *** 安全沙箱冲突 *** 到 127.0.0.1:9999 的连接已停止 - 不允许从 file:///E:/flash/Flash/Vod/tag/Letvcloud__MainVodNew/bin-debug/Player.swf 进行连接

    http://bbs.9ria.com/thread-69309-1-1.html C:\Windows\System32\Macromed\Flash\NPSWF64_21_0_0_242.dll ...

  7. 【计算机视觉领域】常用的 feature 提取方法，feature 提取工具包

    [计算机视觉领域]常用的 feature 提取方法,feature 提取工具包 利用 VL 工具包进行各种特征的提取: VL 工具包官网地址:http://www.vlfeat.org/index.h ...

  8. css animation让图标不断旋转

    @keyframes rotating{from{transform:rotate(0)}to{transform:rotate(360deg)}} animation:rotating 1.2s l ...

  9. How can I create an executable JAR with dependencies using Maven?

    http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using ...

  10. 使得<li>在一行显示，去除浮动的方法

    ①<li>使用浮动的方法,但是要用div包裹起来,该父元素需要设置宽度与高度: <!DOCTYPE html> <html> <head> <me ...