jQ 插件 iscroll.js

使用方法

<div style="position: relative;">
  <div id="wrapper">
    <div class="scroll">
      <ul class="index_nav_bar">
      <li class="li_active">全部</li>
      <li><a href="javascript:void(0);">护肤</a></li>
      <li><a href="javascript:void(0);">彩妆</a></li>
      <li><a href="javascript:void(0);">日用百货</a></li>
      <li><a href="javascript:void(0);">食品</a></li>
      <li><a href="javascript:void(0);">护肤</a></li>
      <li><a href="javascript:void(0);">彩妆</a></li>
      <li><a href="javascript:void(0);">日用百货</a></li>
      </ul>
    </div>
  </div>
</div>

注意:如果要在页面中使用,最好加一个外层div设置position:relative,不然插件自带定位会扰乱布局,修改了自带的位置absolute为relative后,该滑动将不会生效

调用插件:

var Scroll = new iScroll(‘wrapper‘,{hScroll:true,vScroll:false, hScrollbar:false});

wrapper:元素id  //只有该元素下的第一个子元素才会滑动

hScroll:左右滑动

vScroll:上下滑动

hScrollbar:左右滑动条

vScrollbar:上下滑动条

时间: 2024-10-08 10:28:28

jQ 插件 iscroll.js的相关文章

文字环绕和两栏自适应以及区域滚动插件iscroll.js

一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文

jquery——移动端滚动条插件iScroll.js

官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够

省市县 三级 四级联动Javascript JQ 插件PCASClass.js

想要使用这款组件,需要页面引入 PCASClass.js 核心文件,该文件在您的HTML文档<head>标签之内. <script type="text/javascript" src="/path/PCASClass.js"></script> 参数赋值方法案例: <script type="text/javascript"> new PCAS("ProvinceId",&qu

iScroll.js插件使用方法

iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料. 参考:http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html  ,  http://www.nb88.net/Index/p/id/406 官网:http://cubiq.org/is

JQ插件

---恢复内容开始--- 什么是插件 插件(plugin)是JQuery的扩展(Extension),以JQuery的核心代码为基础,是一种遵循一定规范的应用程序接口编写出来的程序. 插件的引入 引入jquery.js文件 引入插件的js文件 引入插件的周边文件,如皮肤,语言包等 插件的使用 可在jqurey的官网上查看JQ的各种插件:http://plugins.jquery.com/ 在点击进入某一插件后,可看到插件的版本等信息,常用的Try a Demo(运行样式)和Read the Do

jq插件的编写方法(自定义jq插件)---转

本JQ插件例子是在你网站的文章结尾处添加你的版权. JQ插件标准的封装代码如下,首先需要闭包: 1 <script type="text/javascript"> 2 (function ($) { 3 //这里放入插件代码 4 })(jQuery); 5 </script> 这是jQuery官方的插件开发规范,这样写是作用是:1. 避免全局依赖.2. 避免第三方破坏.3. 兼容jQuery操作符'$'和'jQuery' 接着给插件加入主体: 1 <scr

移动端那些事;hammer不错的jq插件。

从pc端到移动端相信很多前端攻城师为移动端发愁,写原声的手机端事件是非常费力的, 而jq的click有300毫秒延迟,现在有了比较不错的jq插件hammer,Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件支持各种手机事件,比如缩放 ,qq左滑动删除,  放大, 旋转等. 下面用一个tab切换来介绍hammer. 用法: 1,首先引入jq2.0以上版本和jquery.hammer.js. 2,获取元素,和jq一样,在后面加上ha

iscroll.js 学习笔记

1.0 什么是iscroll.js? 就是一个Javascript 库,或者说是一个JQuery 插件,能在手机端实现下拉刷新,滚动翻页,双指放大缩小等特效. 可以模拟原生iOS应用里的滚动列表操作. 下载地址:https://github.com/cubiq/iscroll/ 2.0为什么要用iscroll.js ? css属性overflow:scroll在ios5之前是不支持的,所以可以通过这个插件来在所有浏览器上支持这种滚动. 3.0如何使用iscroll,js? 直接看demo: ht

iScroll.js的用法

一.iScroll.js的用法 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动.很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头.页尾或者是一个内容可滚动的中间区域. 然而,Android系统最新修订版已经可以支持这种功能了(尽管支持的力