效果预览

实例代码

<!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. Cwinux源码解析（五）

      Cwinux源码解析(五)

  2. office快速制作简历

    毕业的一年是由学校向社会转变的一年,面临着人生的一个重大转折--找工作.在如今信息爆炸的时代,纵使力拔山兮气盖世也难免会被遗落芳草之中而不得一展宏图.对未来的憧憬,对美好生活的向往,或多或少你需要一份 ...

  3. Hard Drive Inspector Pro 4.26.208(硬盘检测工具)简体中文特别版

    Hard Drive Inspector监视硬盘错误并且接收警报,检查变化并实施诊断.例如:驱动器旋转时间增加以及数次重试才能运转驱动器通常意味着发动机和/或者轴存在可以导致数据丢失的错误.HardD ...

  4. Magic CSS3 – 创建各种神奇的交互动画效果

    Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...

  5. 你必须知道ASP.NET知识------从IIS到httpmodule(第一篇)

    一.写在前面 最近有时间,顺便将这系列洗完,接着上文:IIS各个版本知识总结 这篇文章原本计划写到HttpHandler为止,但限于篇幅就写到httpmodule 本文有不足之处,求指正,希望我能将它 ...

  6. 解决ios开发中不合法的网络请求地址

    NSString *const kWebsite = @"http://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct ...

  7. ADO.NET基础巩固-----连接类和非连接类

          最近的一段时间自己的状态还是不错的,早上,跑步,上自习看书,下午宿舍里面编程实战,晚上要么练习代码,要么去打球(在不打就没机会了),生活还是挺丰富的. 关于C#的基础回顾就先到前面哪里,这 ...

  8. LeetCode - Convert Sorted Array to Binary Search Tree

    题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...

  9. SQLServer存储过程中事务的使用

    create proc usp_Stock @GoodsId int, @Number int, @StockPrice money, @SupplierId int, @EmpId int, ), ...

  10. 基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作

    在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...