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

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. UltraEdit快捷键大全-UltraEdit常用快捷键大全

    UltraEdit快捷键大全-UltraEdit常用快捷键大全 UltraEdit是一套功能强大的文本编辑器,可以编辑文本.十六进制.ASCII码,可以取代记事本,内建英文单字检查.C++及VB指令突 ...

  2. cf 235C 后缀自动机

    题目大意 给定字符串\(S\)与\(n<=10^5\)个串\(x_1,x_2...x_n\)(总长\(\le10^6\)) 对于每个\(x_i\),输出有多少个\(S\)的子串与\(x_i\)循 ...

  3. 水晶报表 IE设置

    水晶报表:Crystal Reports(水晶报表)是一款商务智能(BI)软件,主要用于设计及产生报表.水晶报表是业内最专业.功能最强的报表系统,它除了强大的报表功能外,最大的优势是实现了与绝大多数流 ...

  4. 长沙理工校赛I题题解-连续区间的最大公约数

    题目来源https://www.nowcoder.com/acm/contest/96/I 解题前们需要先知道几个结论: 首先,gcd是有区单调性的: gcd(L,R)>=gcd(L,R+d)  ...

  5. C#图解教程学习笔记——数据类型与数据存储

    一.数据类型1. 预定义类型C#提供16种预定义类型,包括13种简单类型和3种非简单类型:(1)简单类型<1>11种数值类型: 不同长度的有符号和无符号整数类型 浮点数的float和dou ...

  6. Ticket Lock, CLH Lock, MCS Lock

    如果不用OS提供的mutex,我们该如何实现互斥锁?(不考虑重入的情况) 1. naive lock 最简单的想法是,搞一个volatile类型的共享变量flag,值可以是flase(无锁)或者tru ...

  7. Codeforces 746G(构造)

                                                                                                      G. ...

  8. Machine Learning Done Wrong【转】

    1. Take default loss function for granted Many practitioners train and pick the best model using the ...

  9. python 设计模式之MVC模式

    一.简单介绍 mvc模式  the  model-view-controller pattern mvc模式是一个运用在软件工程中的设计模式.mvc模式脱离了以前简单的web服务设计逻辑,将开发,测试 ...

  10. Topcoder SRM 663 DIV 1

    ABBADiv1 题意: 规定两种操作,一种是在字符串的末尾添加A,另一种是在末尾添加B然后反转字符串.现在给你一个起始串,一个终点串,然后问你是否能够通过以上两种操作,从起始串变为终点串. 题解: ...