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

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. js 和 jquery的宽高

    window 和 document : window 对象表示浏览器打开的窗口,可以省略 document对象(浏览器的html文档)是window对象的一部分 document.body等于wind ...

  2. 【08】node 之 fs文件

    var fs = require("fs");//fs 系统文件模块,对文件进行操作.Node.js 文件系统(fs 模块)模块中的方法均有异步和同步版本,例如读取文件内容的函数有 ...

  3. 水晶报表 IE设置

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

  4. Bzoj2882 工艺 [线性算法]

    后缀自动机题解 -> http://www.cnblogs.com/SilverNebula/p/6420601.html 后缀自动机敲完,看了下排行,wc为什么别人跑得这么快?……是诶,这最小 ...

  5. JavaScript效果下载网站！

    原文发布时间为:2009-07-16 -- 来源于本人的百度文章 [由搬家工具导入] http://myjs.chinaz.com/

  6. js 验证数字的正则表达式集

    <script type="text/javascript">     function validate(){       var reg = new RegExp( ...

  7. AutoResetEvent 和 ManualResetEvent 多线程应用

    AutoResetEvent 1.用于在多线程,对线程进行阻塞放行 static AutoResetEvent auth0 = new AutoResetEvent(false); static Au ...

  8. Codeforces Gym100735 G.LCS Revised (KTU Programming Camp (Day 1) Lithuania, Birˇstonas, August 19, 2015)

    G.LCS Revised   The longest common subsequence is a well known DP problem: given two strings A and B ...

  9. Codeforces 911F Tree Destruction（贪心 && 树的直径）

    题目链接  Tree Destructi 题意  给定一棵树,每次可以选定树上的两个叶子,并删去其中的一个.答案每次加上两个选定的叶子之间的距离. 求最后答案的最大值. 首先求出树的某一条直径,令其端 ...

  10. ansible 手册

    ansible 官方文档:https://docs.ansible.com/ansible/latest/index.html ansible 中文入门:http://getansible.com/ ...