效果预览

实例代码

<!DOCTYPE html>

<html lang="zh" class="no-js">

 <head>

  <meta charset="UTF-8" />

  <title>catslider简单的多商品分类滑动</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" type="text/css" href="/api/jq/catslider/css/style.css" />

  <script src="/api/jq/catslider/js/modernizr.custom.63321.js"></script>

 </head>

 <body>

  <div class="container">

   <header class="clearfix">

    <h1>简单的多商品分类滑动</h1>

   </header>

   <div class="main">

    <div id="mi-slider" class="mi-slider">

     <ul>

      <li><a href="#"><img src="/api/jq/catslider/images/10.jpg" alt="img10" /></a><h4><a></a><a href="#">jQuery仿蜜淘在线客服</a></h4></li>

      <li><a href="#"><img src="/api/jq/catslider/images/3.jpg" alt="img03" /></a><h4><a></a><a href="#">jQuery+turn.js翻书、文档和杂志</a></h4></li>

      <li><a href="#"><img src="/api/jq/catslider/images/6.jpg" alt="img06" /></a><h4><a></a><a href="#">jCarousel演示7种不同的滚动切换</a></h4></li>

     </ul>

     <ul>

      <li><a href="#"><img src="/api/jq/catslider/images/12.jpg" alt="img12" /></a><h4><a></a><a href="#">php通用截取字符串</a></h4></li>

      <li><a href="#"><img src="/api/jq/catslider/images/5.jpg" alt="img05" /></a><h4><a></a><a href="#">PHP简单的上传图片</a></h4></li>

      <li><a href="#"><img src="/api/jq/catslider/images/11.jpg" alt="img11" /></a><h4><a></a><a href="#">PHP+Ajax+bootstrap+dataTables无刷新分页表格插件</a></h4></li>

     </ul>

     <ul>

      <li><a href="#"><img src="/api/jq/catslider/images/7.jpg" alt="img07" /></a><h4><a></a><a href="#">PHP+Ajax实现在线聊天长轮询</a></h4></li>

      <li><a href="#"><img src="/api/jq/catslider/images/12.jpg" alt="img12" /></a><h4><a></a><a href="#">Nivoslider多种焦点图切换效果</a></h4></li>

      <li><a href="#"><img src="/api/jq/catslider/images/6.jpg" alt="img06" /></a><h4><a></a><a href="#">Mapkey非常好用的键盘插件</a></h4></li>

     </ul>

     <ul>

      <li><a href="#"><img src="/api/jq/catslider/images/10.jpg" alt="img10" /></a><h4><a></a><a href="#">PHP递归无限分类</a></h4></li>

      <li><a href="#"><img src="/api/jq/catslider/images/14.jpg" alt="img14" /></a><h4><a></a><a href="#">PHP+MySQL来实现在线测试quiz功能</a></h4></li>

      <li><a href="#"><img src="/api/jq/catslider/images/9.jpg" alt="img09" /></a><h4><a></a><a href="#">简洁右侧栏客服代码</a></h4></li>

     </ul>

     <nav>

      <a href="#">首页</a>

      <a href="#">jQuery</a>

      <a href="#">PHP</a>

      <a href="#">模板</a>

     </nav>

    </div>

   </div>

  </div>

  <!-- /container -->

	<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="/api/jq/catslider/js/jquery.catslider.js"></script>

  <script>

            $(function() {

                $('#mi-slider').catslider();

            });

        </script>

 </body>

</html>

　　

购物车catslider简单的多商品分类滑动的更多相关文章

  1. Android 使用SwipeActionAdapter开源库实现简单列表的左右滑动操作

    我们做listview左右滑动操作时,一般中情况下,都是像QQ那样,左滑弹出操作菜单(删除.编辑),然后选择菜单操作: 这样的效果不可谓不好,算是非常经典. 另外,有少数的APP,尤其是任务管理类的A ...

  2. 示例篇-购物车的简单示例和自定义JS

    简介: 支持平台: Android4.0,iOS7.0,Windows 10, Windows 10 mobile 说明:主要是演示listview所在的ui和模板cell所在的ui之间数据的交互,点 ...

  3. iOS添加到购物车的简单动画效果

    #pragma mark - 添加到购物车的动画效果 // huangyibiao - (void)addAnimatedWithFrame:(CGRect)frame { // 该部分动画 以sel ...

  4. ViewPager 简单实现左右无限滑动.

    只需在在适配器中将getCount 给一个较大的值, 然后将currentItem 设为值的一半 就可以伪实现 无限循环. private static final int PAGE_COUNT = ...

  5. [deviceone开发]-购物车的简单示例

    一.简介 主要是演示listview所在的ui和模板cell所在的ui之间数据的交互,点击一行,可以通过加减数量,自动把所有选中的汽车价格显示在底部. 二.效果图 三.示例地址: http://sou ...

  6. Newbe.Claptrap 框架入门，第二步 —— 简单业务，清空购物车

    接上一篇 Newbe.Claptrap 框架入门,第一步 —— 创建项目,实现简易购物车 ,我们继续要了解一下如何使用 Newbe.Claptrap 框架开发业务.通过本篇阅读,您便可以开始尝试使用 ...

  7. 自定义scrollview右侧的滑动条

    在做这个功能之前我其实是拒绝的,为什么这么说呢,因为我怕麻烦啊!(开玩笑的,怕麻烦就不做程序员了) 很久没有写博客,这次刚好项目中有个有趣的东西,想拿出来分享一下,希望能帮到某些小伙伴. 首先说说需求 ...

  8. android自定义View之仿通讯录侧边栏滑动，实现A-Z字母检索

    我们的手机通讯录一般都有这样的效果,如下图: OK,这种效果大家都见得多了,基本上所有的android手机通讯录都有这样的效果.那我们今天就来看看这个效果该怎么实现. 一.概述 1.页面功能分析 整体 ...

  9. iOS-实现映客首页TabBar和滑动隐藏NavBar和TabBar

    之前在做直播的时候,参照了映客App,发现其首页的效果还挺不错,在网上找了一下相关仿映客App代码和博客,大部分都是说如何播放直播流和推流,对于UI这块甚少,所以我自己花了点时间研究了一下映客的首页U ...

随机推荐

  1. 深入理解CSS定位中的偏移

    × 目录 [1]定位 [2]包含块 [3]偏移属性[4]绝对定位[5]格式化 [6]auto 前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位 ...

  2. Spark入门实战系列--2.Spark编译与部署（下）--Spark编译安装

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .编译Spark .时间不一样,SBT是白天编译,Maven是深夜进行的,获取依赖包速度不同 ...

  3. Nutch源码阅读进程5---updatedb

    看nutch的源码仿佛就是一场谍战片,而构成这精彩绝伦的谍战剧情的就是nutch的每一个从inject->generate->fetch->parse->update的环节,首 ...

  4. Nutch源码阅读进程1---inject

    最近在Ubuntu下配置好了nutch和solr的环境,也用nutch爬取了一些网页,通过solr界面呈现,也过了一把自己建立小搜索引擎的瘾,现在该静下心来好好看看nutch的源码了,先从Inject ...

  5. 【知识积累】爬虫之网页乱码解决方法(gb2312 -> utf-8)

    前言 今天在测试爬虫项目时,发现了一个很严肃的问题,当爬取的网页编码格式为gb2312时,按照一般的办法转化为utf-8编码时总是乱码,PS:爬取的所有网页无论何种编码格式,都转化为utf-8格式进行 ...

  6. 【环境配置】Linux环境下下载、配置java环境、安装eclipse、建立eclipse快捷方式详解

    一.首先是下载Java JDK 到目前为止的最新版本为(jdk1.8.0_60),有两种方式进行下载: 1.使用shell来进行下载,可使用如下命令直接进行下载: wget --no-check-ce ...

  7. java基础题目总结

    有些基础题目由于工作中用的比较少但却又是不可少的,这样回答起来就会反应慢,不确定,不准确,特此开了文章记录遇到的不确定或者回答比较拗口的问题. 1.servlet是单例的吗,是安全的吗,是多线程吗 s ...

  8. mybatis错误之配置文件属性配置问题

    在mybatis的配置文件SqlMapConfig.xml中,可以在开始的地方先加载一个properties节点,用来定义属性变量. <!-- 加载属性文件 --> <propert ...

  9. 7z制作自解压安装包

    像7z和winRAR这样的压缩工具都支持制作自解压的文件.所谓自解压的文件就是不需要目标机器上安装解压工具,通过运行压缩包自己即可解压出压缩包中的文件.下面我们就介绍一下如何利用7z的自解压功能制作应 ...

  10. MVVM-Sidekick 之SendToEventRouterAction使用

    在WP开发中点击列表项跳转到详情页是一个很常用的功能,但是有可能项模板中还有其他的区域,比如点击标题跳转到详情页,点击"赞"图标送一个赞,点击"踩"图标踩一下, ...