<!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. UIView的clipsTobounds属性

    这里的clip是修剪的意思,bounds是边界的意思,合起来就是:如果子视图的范围超出了父视图的边界,那么超出的部分就会被裁剪掉.该属性在实际工程中还是非常实用的,必须要了解清楚.

  2. GIS－开发例程、源代码、MapXtreme、Map (转)

    [原创]MapXtreme实用技巧与源码10例 普通图片生成MapInfo格式电子地图的步骤  http://blog.csdn.net/hmbb2008/category/184134.aspx 基 ...

  3. windows驱动编程（目录）

    目录 第一章 入门 配置开发环境 第一个程序 应用程序调用内核函数的流程

  4. [Math]Divide Two Integers

    otal Accepted: 54356 Total Submissions: 357733 Difficulty: Medium Divide two integers without using ...

  5. I/O事件

    I/O事件 最近在研究tornado和gevent,里面涉及了非阻塞I/O.在了解非阻塞I/O之前,需要先了解I/O事件 我们知道,内核有缓冲区.假设有两个进程A,B,进程B想读进程A写入的东西(即进 ...

  6. Vector, ArrayList, Array

    JAVA新手在使用JAVA的时候大概都会遇到这个问题: JAVA中的Array, ArrayList, Vector, List, LinkedList有什么样的区别?尤其是Vector, Array ...

  7. 李维作答 《insideVCL》——李维实在很勤奋，而且勇于突破，从不以旧的内容充数

    (编者按)<Inside VCL(VCL核心架构剖析)>一书出版以来,众多热心读者给李维先生.博文视点公司.CSDN写来信件,有更多朋友在各个论坛上发表关于该书的言论.读者们不但盛赞该书, ...

  8. Inno Setup技巧[界面]添加和自定义左下角标签

    原文 http://blog.sina.com.cn/s/blog_5e3cc2f30100cc49.html 本文介绍添加和自定义“左下角标签”的方法. 界面预览: Setup技巧[界面]添加和自定 ...

  9. 【LeetCode练习题】Gas Station

    Gas Station There are N gas stations along a circular route, where the amount of gas at station i is ...

  10. python sqlite 查询表的字段名 列名

    获得查询结果表的列名: [python]  view plain copy print ?   db = sqlite.connect('data.db') cur = db.cursor() cur ...