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

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. Docker学习之Docker Registry

    前言 前面已经学习了怎样通过Dockerfile来构建我们自己的镜像了,但是一个系统可能包含着很多个微服务即有很多个镜像,当镜像越来越多的时候,就必须得有一个地方来管理这些镜像,Docker官方提供了 ...

  2. day5感想

    ---恢复内容开始--- 我感觉自己真的是太弱了,和那些从初中开始学的人TT 今天讲的数学,毕竟以前尖子生培训打过点基础,感觉还不错,但也仅限于听懂而已,打代码什么的…… 今天的内容: 一.数论 1. ...

  3. js判断手机的左右滑动

    js代码 $(function() { function judge() { var startx;//让startx在touch事件函数里是全局性变量. var endx; var el = doc ...

  4. 涂色问题（Python）

    题目:将一个圆形等分成N个小扇形,将这些扇形标记为1,2,3,-,N.现在使用M种颜色对每个扇形进行涂色,每个扇形涂一种颜色,且相邻的扇形颜色不同,问有多少种不同的涂法?(N≥1,M≥3) 参考:ht ...

  5. ubuntu 12.04LTS下搭建Andriod开发环境记录

    今天在Ubuntu 12.04 LTS 下安装了android开发环境. 1, 安装JDK 先去 Oracle下载Linux下的JDK压缩包,我下载的是jdk-7u4-linux-i586.tar.g ...

  6. Linux和Cisco命令行通用快捷键。

    Ctrl a e 行首,行尾(ahead,end)Esc f b 单词首,单词尾Ctrl f b 移动光标(forward,backwards) Ctrl u k 剪切光标前所有,剪切光标后所有Ctr ...

  7. Codeforces Round #315 (Div. 2)【贪心/重排去掉大于n的元素和替换重复的元素】

    B. Inventory time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  8. 2016北京集训测试赛（十七）Problem C: 数组

    Solution 线段树好题. 我们考虑用last[i]表示\(i\)这个位置的颜色的上一个出现位置. 考虑以一个位置\(R\)为右端点的区间最远能向左延伸到什么位置: \(L = \max_{i \ ...

  9. Codeforces 535B Tavas and SaDDas 水题一枚

    题目链接:Tavas and SaDDas Once again Tavas started eating coffee mix without water! Keione told him that ...

  10. Linux下设置开机启动

    新配置了vsftpd 需要设置ftp开机启动,linux新手,还不是很熟悉linux下的操作! 查询后发现命令是: chkconfig vsftpd on chkconfig命令用于设置运行级别   ...