<!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. C学习-fgets()篇1

    学习fgets()函数时发现了一个问题,先贴代码 #include<stdio.h> #include<string.h> #include<ctype.h> vo ...

  2. Java集合框架：Set、List、Map等介绍

    目录 1.Java集合类基本概念 2.Java集合类架构层次关系 1.Java集合类基本概念 在编程中,常常需要集中存放多个数据.从传统意义上来讲,数组是我们一个很好的选择,前提是我们事先已经明确知道 ...

  3. 纯css改变下拉列表select框的默认样式

    下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下* ...

  4. RemoteViews的理解和使用

    一.RemoteViews简介 作用:跨进程更新界面                         使用场景:通知栏.桌面小部件 二.在通知栏上的应用 原理:通过RemoteViews加载布局,通过 ...

  5. WDLINUX (Centos5.8) 安装 soap

    CENTOS5.8  PHP5.2.17 [PHP5.3.27版的看这里] WDLINUX (centos) 安装 soap====================================== ...

  6. python成长之路第三篇(2)_正则表达式

    打个广告欢迎加入linux,python资源分享群群号:478616847 目录: 1.什么是正则表达式,python中得正则简介 2.re模块的内容 3.小练习 一.什么是正则表达式(re) 正则表 ...

  7. USB OTG介绍（转载）

    1. 概要 OTG设备使用插头中的ID引脚来区分A/B Device,ID接地被称作为A-Device,为连接时候的USB Host,A-Device始终为总线提供电力,ID悬空被称作为B-Devic ...

  8. Linux进程间通信——使用信号

    一.什么是信号 用过Windows的我们都知道,当我们无法正常结束一个程序时,可以用任务管理器强制结束这个进程,但这其实是怎么实现的呢?同样的功能在Linux上是通过生成信号和捕获信号来实现的,运行中 ...

  9. linux grep练习

    1.显示/proc/meminfo文件中以不区分大小的s开头的行: 2.显示/etc/passwd中以nologin结尾的行; 3.显示/etc/inittab中以#开头,且后面跟一个或多个空白字符, ...

  10. linux命令之mv

    linux下的mv即move的意思 该命令的一般形式: mv [选项] 参数1 参数2 选项: -b                如果已存在相同文件名,则覆盖前进行备份 -f             ...