效果预览

实例代码

<!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. 使用jasperreports-5.6.0.jar导致的问题

    使用jasperreports-5.6.0.jar导致的问题 Struts2+jasperReport5.6如下设置: <!-- 社员档案 --> <package name=&qu ...

  2. 移动端BUG汇总

    position:fixed问题 固定定位到底部会把最后一个元素盖住 你会发现最后一个字被盖住了,并且还滚动不下去. 解决方法: 给后一个元素添加一个高度,或者给body加margin-bottom ...

  3. MySQL的用户和权限介绍

    一.关于MySQL权限的几点常识: 1.MySQL的权限系统主要用来验证用户的操作权限. 2.在MySQL内部,权限信息存放在MySQL数据库的granttable里.当mysql启动后,grantt ...

  4. Netty中的坑(下篇)

    其实这篇应该叫Netty实践,但是为了与前一篇名字保持一致,所以还是用一下坑这个名字吧. Netty是高性能Java NIO网络框架,在很多开源系统里都有她的身影,而在绝大多数互联网公司所实施的服务化 ...

  5. tiltShift.js - CSS3 滤镜实现移轴镜头效果

    tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...

  6. Intention.js – 动态重构 HTML 为响应式模式

    Intention.js 提供一个轻量级的和明确的方式,帮助你动态重组 HTML,成为响应式的方式.操作方法都放在了元素自己里面,所以灵活的布局看起来就似乎不会那么的抽象和凌乱. 您可以轻松地增加布局 ...

  7. 使用ajax提交form表单，包括ajax文件上传

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

  8. 20款精致的长阴影 LOGO 设计【附免费生成工具】

    长阴影(Long Shadow)概念来自于最新非常流行的扁平化设计(Flat Design).扁平化设计趋势影响最大的是用户界面元素和图标,但它也开始蔓延到其他网页设计的其他部分. 长阴影其实就是扩展 ...

  9. Elasticsearch增删改查 之 —— Delete删除

    删除文档也算是常用的操作了...如果把Elasticsearch当做一款普通的数据库,那么删除操作自然就很常用了.如果仅仅是全文检索,可能就不会太常用到删除. Delete API 删除API,可以根 ...

  10. 在SQL Server 2014里可更新的列存储索引 （Updateable Column Store Indexes）

    传统的关系数据库服务引擎往往并不是对超大量数据进行分析计算的最佳平台,为此,SQL Server中开发了分析服务引擎去对大笔数据进行分析计算.当然,对于数据的存放平台SQL Server数据库引擎而言 ...