<!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. Spring--------web应用中保存spring容器

    ---恢复内容开始--- 问题:在一个web应用中我使用了spring框架,但有一部分模块或组件并没有托管给Spring,比如有的可能是一个webservice服务类,如果我想在这些非托管的类里使用托 ...

  2. c#之process类相关整理

    一.根据进程名获取进程的用户名?   需要添加对 System.Management.dll 的引用   using System.Diagnostics; using System.Manageme ...

  3. java 成神之路

    一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http://www.jcp.org/en/jsr/detail?id=133 http://i ...

  4. Eclipse编译Arduino程序不能使用串口函数Serial.begin解决办法

    在Arduino官方的编译器当中Serial.begin(9600);初始化语句是可以直接使用的,而到Eclipse当中,同样的语句却不能用了.会出现下面的问题: 显然,这是Eclipse没有找到Se ...

  5. C++ 析构函数为虚函数

    1.原因: 在实现多态时, 当用基类指针操作派生类, 在析构时候防止只析构基类而不析构派生类. 2.例子: (1). #include<iostream> using namespace ...

  6. 关于微信小程序的一些思考

    ### 怎么样理解小程序? * 微信的重点产品* 一个事实OS,目前并不知道小程序的入口在哪里?* 小程序的入口可能在如下三个地方: 1. 发现入口 2. 扫码 3. 搜索框 * 小程序没有关注, 意 ...

  7. 初识scrapy，美空网图片爬取实战

          这俩天研究了下scrapy爬虫框架,遂准备写个爬虫练练手.平时做的较多的事情是浏览图片,对,没错,就是那种艺术照,我骄傲的认为,多看美照一定能提高审美,并且成为一个优雅的程序员.O(∩_∩ ...

  8. FormSheet式模态视图，点击模态视图外隐藏模态视图的方法

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  9. SSAS-时间维度的标准设计

    1.首先要构建一个时间维度表,下面给出通用的构建时间维度的存储过程: USE [BI_DW] GO /****** Object: StoredProcedure [dbo].[proc_Dim_da ...

  10. MinGW安装教程

    首先说明一下 1) MinGw只是其中一种GCC编译环境的安装程序,还有像Cygwin也是差不多的; 2) 由于安装的时候有些地方忘了截图,所以图有些是借鉴别人的; 3) 还要就是安装MinGw,最好 ...