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

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. Number String（hdu 4055）

    题意:给定一个字符串,I表示本字符要比前一个字符大,D表示本字符要不前一个字符小,?可大可小,问1~n的所有排列中,有多少满足条件 /* dp方程的设定比较显然,dp[i][j]表示选了i个元素,最后 ...

  2. URL短网址生成算法原理和php实现案例

    短网址(Short URL),顾名思义就是在形式上比较短的网址. 短链接的好处:1.内容需要:2.用户友好:3.便于管理为什么要这样做的,原因我想有这样几点:微博限制字数为140字一条,那么如果我们需 ...

  3. Method, apparatus, and system for speculative abort control mechanisms

    An apparatus and method is described herein for providing robust speculative code section abort cont ...

  4. vscode Go 1.11.4 编译错误 need Delve built by Go 1.11 or later

    更新golang的版本为1.11.4之后vscode编译错误:executables built by Go 1.11 or later need Delve built by Go 1.11 or ...

  5. python3模拟扑克牌

    python3.6环境 import collections from random import choice Card=collections.namedtuple('Card',['rank', ...

  6. fprintf与fscanf

    #include <stdio.h> int main() { //printf("Please input the value a:\n"); 等于下一句 fprin ...

  7. Python Challenge 第十五关

    第15关,题目是 whom? 有一张图片,是个日历.日历的年份是 1XX6,中间是被挖去的洞.然后图中1月26日被画了个圈,当天是星期一.右下角的二月小图中有29号,可以得知这是闰年.然后查看源代码. ...

  8. 腾讯云使用liveRoom开启直播时，报“房间已存在”错误？

    利用腾讯云roomService服务,移动直播,创建房间api,CreateRoom时有时报“房间已存在”错误. 分析流程发现,CreateRoom会传入roomId到roomService后台,后台 ...

  9. ECNU 3480 没用的函数 （ST表预处理 + GCD性质）

    题目链接  ECNU 2018 JAN Problem E 这题卡了双$log$的做法 令$gcd(a_{i}, a_{i+1}, a_{i+2}, ..., a_{j}) = calc(i, j)$ ...

  10. 【WEB基础】HTML & CSS 基础入门（8）表单

    前面 前面我们已经熟悉了网页上一些常见的元素,如在网页上显示一段文字.一张图片.一个列表.一张表格等等.这些东西都是事先编辑好显示在页面上只提供给用户看的,实际上,我们可以把这样的页面称之为静态页面. ...