利用外层的块级元素负外边距来滚动

1.使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>index</title>

        <script type="text/javascript" src="/jq.js"></script>

        <!-- Date: 2014-02-23 -->

        <style type="text/css">

        /**

         *

         * IE6中需要这样设置才会起作用

         */

            *{

                margin: 0;

                padding: 0;

            }

        </style>

    </head>

    <body>

<div style="overflow:hidden;">

    <div style="overflow: hidden;height: 50px;">

        <ul class="iscroll">

            <li >1</li>

            <li >2</li>

            <li>3</li>

        </ul>

    </div>

</div>

<script type="text/javascript" src="/jqplug/iscroll.js"></script>

<script type="text/javascript">

            $('.iscroll').iscroll({

                s:35

            });

        </script>

    </body>

</html>

2.代码

(function ( $ ) {

    $.fn.iscroll=function(options){

        var settings = $.extend({

      s:45

    }, options );

        $this=this;

        $height=parseInt(this.height());

        $children=this.children();

         $clone= $children.clone();

         this.prepend($clone);

    $inter=    setInterval(function(){

            $margintop=$this.css('margin-top');

  $margintop=             parseInt($margintop);

 $childh=   parseInt($this.children().height());

  if(Math.abs($margintop)>=$height){

      $this.css('margin-top',"0px");

  }else{

            $this.css('margin-top',$margintop-1+"px");

        }

        },settings.s);

        this.on('mouseover',function(){

            clearInterval($inter);

        });

        this.on('mouseout',function(){

        $inter=setInterval(function(){

            $margintop=$this.css('margin-top');

  $margintop=             parseInt($margintop);

 $childh=   parseInt($this.children().height());

  if(Math.abs($margintop)==$height){

      $this.css('margin-top',"0px");

  }else{

            $this.css('margin-top',$margintop-1+"px");

        }

        },settings.s);

        });

    }

    }( jQuery ));

3.注意事项

1.不要在调用方法的元素上(示例中.iscroll)使用padding内上下边距

2.里层的<li>元素不要使用外边距但可以使用内边距

4. <style type="text/css"> /** * * IE6中需要这样设置才会起作用 */ *{ margin: 0; padding: 0; } </style>

　　　　

jquery垂直滚动插件一个参数用于设置速度,兼容ie6的更多相关文章

  1. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  2. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

  3. （转）15个非常棒的jQuery无限滚动插件【瀑布流效果】

    原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...

  4. 15个非常棒的jQuery无限滚动插件【瀑布流效果】

    现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...

  5. Flexslider - 响应式的 jQuery 内容滚动插件

    FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...

  6. liMarquee – jQuery无缝滚动插件（制作跑马灯效果）

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  7. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  8. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  9. 自己写一个jQuery垂直滚动栏插件（panel）

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...

随机推荐

  1. 转：：iOS 仿淘宝,上拉进入详情页面

    今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...

  2. AJAX在VS2005中的简单应用 使用ajaxpro.2.dll[点击按钮执行事件不刷新]

    原文发布时间为:2008-10-21 -- 来源于本人的百度文章 [由搬家工具导入] 1.下載ajaxpro.dll或AjaxPro.2.dll 放在Bin文件夹中2.配置web.config 3.u ...

  3. poj 3254 Corn Fields 状压dp入门

    题目链接 题意 在\(M\times N\)的\(0,1\)格子上放东西,只有标记为\(1\)的格子可以放东西,且相邻的格子不能同时放东西.问有多少种放法. 思路 参考:swallowblank. \ ...

  4. hdu 4523(大整数)

    威威猫系列故事——过生日 Time Limit: 500/200 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  5. interview fb2

    2014.7.8fb #include <iostream> using namespace std; struct TreeNode{ int val; TreeNode *left; ...

  6. javascript解析机制——预解析

    JavaScript解析机制是什么? JavaScript解析过程分为两个阶段,一个是编译阶段,另外一个就是执行阶段. * 编译阶段         编译阶段就是我们常说的JavaScript预解析( ...

  7. gtest 自动化测试 部署

    1.部署 a)编译框架 1.1下载gtest库1.6.0 并解压到文件夹 "/user/{user}/gtest.1.6.0" 下载地址:https://code.google.c ...

  8. SecureCRT发送键盘按键对应表（转义字符）

    \r 发送回车(CR) \n 发送换行符(LF) \b 发送退格 \e 发送一个转义 \t 发送一个标签 \\ 发送一个反斜杠字符 \v 将剪贴板的内容粘贴到活动状态会话窗口 \p 暂停一秒钟

  9. Dedecms文章内容页和图片集内容页，调用缩略图的方法

    文章内容页缩略图的调用,图片集内容页缩略图的调用,相信大家都想找这个,对于初学者来说,一大福音> 文章内容页和图片集内容页,缩略图的调用.适合内页中调用. 1 <img src=" ...

  10. C++输入和输出中进制问题

    默认下都是十进制 int i, j, k, l; cin>>oct>>i; //输入为八进制数 cin>>hex>>j; //输入为十六进制数 cin& ...