<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>绑定事件</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .div{

            width: 200px;

            height: 240px;

            overflow: hidden;

            position: relative;

            border: 1px solid #d74147;

        }

        .div ul{

            width: 200px;

            height: 240px;

            position: absolute;

            margin: 0;

            padding: 0;

        }

        .div ul li{

            width: 200px;

            height: 60px;

            list-style-type: none;

        }

    </style>

    <script src="js/jquery-1.7.1.js"></script>

    <script>

        $(function(){

            //复制与现有的Li一样多个

            $('ul').find('li').clone().appendTo($('ul'));

            $('ul').height($('ul').find('li').length * $('ul').find('li').height());

            setInterval(function() {

                if($('ul').position().top < -$('ul').height()/2){

                    $('ul').css('top','0');

                }

                else{

                    $('ul').css('top',$('ul').position().top - 2 + 'px');

                }

            },30);

        });

    </script>

</head>

<body>

<div class="div" id="div1">

    <ul>

        <li><img src="img/1.jpg" /></li>

        <li><img src="img/1.jpg" /></li>

        <li><img src="img/1.jpg" /></li>

        <li><img src="img/1.jpg" /></li>

    </ul>

</div>

</body>

</html>

　　

jQuery无缝滚动向上的更多相关文章

  1. jquery无缝间歇向上滚动(间断滚动)

    jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...

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

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

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

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

  4. jquery——无缝滚动

    无缝滚动: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. jQuery无缝间歇向上滚动

    http://www.jiangweishan.com/article/jQuery-scroll-up.html

  6. jquery 无缝滚动 jquery.kxbdmarquee

    DEMO http://code.ciaoca.com/jquery/kxbdmarquee/demo/ 官网 http://code.ciaoca.com/jquery/kxbdmarquee/ D ...

  7. jQuery无缝滚动插件

    插件代码 ;(function ($) { // jQuery marquee 插件 $.fn.marquee = function (options) { // 默认设置 var defaults ...

  8. jquery无缝滚动效果实现

    demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

随机推荐

  1. Asp.net MVC razor语法参考

    Razor语法的快捷参考http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/ 只是copy下来便于查阅! I ...

  2. Sublime Text 3中使用正则表达式删除空行

    Sublime Text 3 中使用正则表达式删除空行 Ctrl+H Find What: \n\n+ Replace With:\n

  3. A - 487-3279

    Description Businesses like to have memorable telephone numbers. One way to make a telephone number ...

  4. [Effective C++系列]－为多态基类声明Virtual析构函数

    Declare destructors virtual in polymorphic base classes.   ［原理］ C++指出,当derived class对象经由一个由base clas ...

  5. java poi 导入excel

    最近项目需要导入excel,网上有很多例子,自己整合记录下,兼容2003和2007,暂时没有添加图片处理功能. 所需jar包  http://pan.baidu.com/s/1sjPuWDR pack ...

  6. JavaMail发送简单邮件

    非常简单的发送邮件实现,网上有很多啦,但还是自己写写记录下吧. package cn.jmail.test; import java.util.Properties; import javax.mai ...

  7. SecureCRT使用的技巧 键盘修改

    secureCRT 修改PageUP,PageDown,Home,End键小trick:http://blog.csdn.net/shark_sq/article/details/6722512 所有 ...

  8. js中邦定事件与解绑支持匿名函数

    和一个朋友讨论了一下,DOM2绑定方式都是有名的函数,匿名的处理起来有些麻烦,而且即使是有名的函数,在IE低版本的浏览器也是解除不掉的,this指向需要修改,着实费了一番功夫,这个是兼容ie低版本的, ...

  9. js文件代码未加载或者没有js效果

    问题:在页面中js文件中的代码未加载或者没有任何效果. 原因: 成功引用了js文件,但无效果或者提示未加载该文档中的代码. 可能页面引用js文件的路径存在问题 解决: 重新检查你引用的js文件的路径是 ...

  10. VS2010中手动重命名项目

    在visual studio 中重命名项目名称的方法: 1. 重命名项目名称 2. 修改Assembly name 3. 修改Default namespace 4. 在Assembly Inform ...