<!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. CAA调试

    在需要调试的Module(*.m)上右键,选择属性,命令位置选择你的framework目录    路径选择对应工程目录下的\intel_a(或者Win64    --    64位机器) 然后就可以尽 ...

  2. Mysql JOIN优化。

    join性能自行百度,google 数据60w+,这里我只测试了一个limit , ) ,) AS C LEFT JOIN table2 AS B ON C.e_id=B.id; ) ,;

  3. centos安装phpMyAdmin

     phpMyAdmin是一个网络接口,通过它可以管理你的MySQL数据库. 首先,我们使CentOS系统RPMForge软件库的phpMyAdmin,而不是官方的CentOS 6.2库: 所以需要导入 ...

  4. 使用微软的(how-old.net)构建智能门店管理系统

    现在是大数据时代,每个企业都要对自己的客户有全面的认识,这样才能最准确的分析客户,做出相应的决策.在实体的门店中,对于客户的管理还是比较低级,很多客户对于企业来说是哑终端,即对于企业来说,完全不知道客 ...

  5. Cable master--hdu1551(二分法)

    Cable master Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  6. 正式学习React( 三)

    最基本的jsx语法什么的,我就不介绍了,唯一觉得有用点的,就是声明周期了. 下面的内容是转来的,自己也可以网上去搜,我觉得别人归纳的挺不错的,不过写法可能不是es6的,不影响学习. 在组件的整个生命周 ...

  7. 评价早期SaaS创业公司时，投资人在关注什么？（是否有机会发展成一个平台，长期的护城河）

    编者按: 当聊到早期项目时,人们经常会问投资人一个问题:“在评价早期 SaaS 创业公司时,投资人会关注什么——指标还是其他方面?” Nakul Mandan 作为 Lightspeed 风投机构的合 ...

  8. 一张图片入门Python

    一张图片入门Python 之前已有别人整理了,一张图入门Python,快速了解各种基本的语法. 英文版: 图 5.1. Quick Python Script Explanation 中文版: 图 5 ...

  9. poj 1328 Radar Installation_贪心

    翻出一年多前的代码看,发现以前的代码风格很糟糕 题意:给你n个点 m为圆的半径,问需要多少个圆能把全部点圈到 #include <iostream> #include <algori ...

  10. Fast RCNN 学习

    因为项目需要,之前没有接触过深度学习的东西,现在需要学习Fast RCNN这个方法. 一步步来,先跟着做,然后再学习理论 Fast RCNN 训练自己数据集 (1编译配置) Fast RCNN 训练自 ...