效果预览

实例代码

<!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. OpenCascade Primitives BRep - Box

    OpenCascade Primitives BRep - Box eryar@163.com Abstract. BRep is short for Boundary Representation. ...

  2. Mysql存储过程语法

    一口气弄完了! 一.条件语句if-then-else: create procedure demo_1(in param int) begin declare var int; ; then inse ...

  3. Android开发之登录验证

    最近在做一个小项目,项目开发中需要实现一个登录验证功能,具体的要求就是,在Android端输入用户名和密码,在服务器端验证MySQL数据库中是否有此用户,实现之前当然首要的是,如何使Android端的 ...

  4. poj1330Nearest Common Ancestors 1470 Closest Common Ancestors（LCA算法）

    LCA思想:http://www.cnblogs.com/hujunzheng/p/3945885.html 在求解最近公共祖先为问题上,用到的是Tarjan的思想,从根结点开始形成一棵深搜树,非常好 ...

  5. [转载]PhotoShop性能优化

    现在随着Photoshop版本越来越高功能也越来越强大,而往往强大的功能需要电脑有好的配置运行,比如HDR.图像合成或者3D和视频等类似的功能,还有处理比较大尺寸的图像时,如果电脑配置不够强往往非常卡 ...

  6. eclipse中关联文件设置方法

    在前几次的试验中,只是做了处于应用程序最上层的界面设计,其实还不知程序在运行过程中到底调用了哪些函数,这些函数是怎么实现的,由于搭建环境时没有进行文件关联,所以在环境中无法实现ctrl键+左击鼠标的方 ...

  7. js获取图片的真实大小，字节大小

    在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <ht ...

  8. 解决AndroidADT自带Eclipse编辑器不能自动代码提示的问题。

    今天发现,我下载的AndroidADT开发套装中自带的Eclipse没有自动代码提示功能.通过参考http://blog.csdn.net/coolszy/article/details/724195 ...

  9. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  10. [转]virtualenv建立多个Python独立开发环境

    不同的人喜欢用不同的方式建立各自的开发环境,但在几乎所有的编程社区,总有一个(或一个以上)开发环境让人更容易接受. 使用不同的开发环境虽然没有什么错误,但有些环境设置更容易进行便利的测试,并做一些重复 ...