<!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. Android 轮询之 Service + AlarmManager+Thread （转）

    android中涉及到将服务器中数据变化信息通知用户一般有两种办法,推送和轮询. 消息推送是服务端主动发消息给客户端,因为第一时间知道数据发生变化的是服务器自己,所以推送的优势是实时性高.但服务器主动 ...

  2. MyEclipse开发的java web项目在 Eclipse中无法识别

    不能识别项目解决办法 在eclipse下,右键项目properties   ->  project fac e ts 选中 Dynamic web module 选择后面的版本为 2.5(运行环 ...

  3. ContextLoaderListener和Spring MVC中的DispatcherServlet加载内容的区别

    一:ContextLoaderListener加载内容 二:DispatcherServlt加载内容 ContextLoaderListener和DispatcherServlet都会在Web容器启动 ...

  4. Java程序读取tomcat下的properties配置文件

    代码如下: //找到tomcat/etc/wx文件夹    private static String getPropFolderPath()    {  /* Properties p = Syst ...

  5. Oracle学习之常见错误整理

    一.ORA-12154: TNS: 无法解析指定的连接标识符 在程序中连接Oracle数据库的方式与其他常用数据库,如:MySql,Sql Server不同,这些数据库可以通过直接指定IP的方式连接, ...

  6. media type 与 media query

    参考博客:http://www.qianduan.net/media-type-and-media-query.html media type(媒体类型)是css 2中的一个非常有用的属性,通过med ...

  7. Linux Power（一）： kernel/power/earlysuspend.c

    /* kernel/power/earlysuspend.c * * Copyright (C) 2005-2008 Google, Inc. * * This software is license ...

  8. 类与对象 - PHP手册笔记

    基本概念 PHP对待对象的方式与引用和句柄相同,即每个变量都持有对象的引用,而不是整个对象的拷贝. 当创建新对象时,该对象总是被赋值,除非该对象定义了构造函数并且在出错时抛出了一个异常.类应在被实例化 ...

  9. UVA 12657 Boxes in a Line

    双向链表 注意:如果算法是最后处理翻转情况时,注意指令4翻转后1,2两个指令也要翻转处理: 指令3 中交换盒子要注意两个盒子相邻的情况 #include <iostream> #inclu ...

  10. Div+Css（一）必备知识

    我只积累我不知道的 参考链接 http://www.kwstu.com/ArticleView/divcss_201442291125960 http://www.kwstu.com/ArticleV ...