效果

html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>纵向滚动</title>

        <link rel="stylesheet" type="text/css" href="css/scrollVertical.css">

    </head>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script src="js/scroll.js"></script>

    <body>

        <div id="scrollFlash" class="scrollFlash">

            <ul class="ulFlash"></ul>

        </div>

        <script type="text/javascript">

            var list = [{

                    "id": "1",

                    "name": "张一",

                },

                {

                    "id": "2",

                    "name": "王二",

                }

            ];

            if (list.length > 0) {

                $('#scrollFlash').show();

                var j = 0;

                while (j < list.length) {

                    var string = "<li>序号<span class='flashName t_center'>" +

                        list[j].id + "</span>姓名<span class='flashName t_center'>" +

                        list[j].name + "</span></li>";

                    $('.ulFlash').append(string);

                    j++;

                }

                var h = $('.ulFlash li:first-child').height() + 5;

                if (list.length > 1) {

                    $("div#scrollFlash").myScroll({

                        speed: 40, // 数值越大，速度越慢

                        rowHeight: h // li的高度

                    });

                }

            }

        </script>

    </body>

</html>

scrollVertical.css

.t_center {

    text-align: center;

}

#scrollFlash {

    width: 80%;

    margin: 100px auto auto auto;

    height: 60px;

    background-color: lightcoral;

    line-height: 60px;

    padding: 5px;

    font-size: 40px;

    overflow: hidden;

    color: #ffffff;

}

#scrollFlash ul li {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 2px;

}

.flashName {

    max-width: 20%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

scroll.js

(function($){

    $.fn.myScroll = function(options){

    //默认配置

    var defaults = {

        speed:40,  //滚动速度,值越大速度越慢

        rowHeight:24 //每行的高度

    };

    var opts = $.extend({}, defaults, options),

              intId = [];

    function marquee(obj, step){

        obj.find("ul").animate({

            marginTop: '-=1'

        },0,function(){

                var s = Math.abs(parseInt($(this).css("margin-top")));

                if(s >= step){

                    $(this).find("li").slice(0, 1).appendTo($(this));

                    $(this).css("margin-top", 0);

                }

            });

        }

        this.each(function(i){

            var sh = opts["rowHeight"],speed = opts["speed"],

                              _this = $(this);

            intId[i] = setInterval(function(){

                if(_this.find("ul").height()<=_this.height()){

                    clearInterval(intId[i]);

                }else{

                    marquee(_this, sh);

                }

            }, speed);

            _this.hover(function(){

                clearInterval(intId[i]);

            },function(){

                intId[i] = setInterval(function(){

                    if(_this.find("ul").height()<=_this.height()){

                        clearInterval(intId[i]);

                    }else{

                        marquee(_this, sh);

                    }

                }, speed);

            });

        });

    }

})(jQuery);

js 实现纵向轮播的更多相关文章

  1. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  4. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  5. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  6. Bootstrap的js插件之轮播(carousel)

    轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  9. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

随机推荐

  1. spring boot 项目启动无法访问，排查

    查看docker日志,后台应用正常启动,定时任务正常执行,但是前端无法访问到后端接口,点击提示系统错误,解压出项目二级域名,访问域名,报错:Kong Error,说明Kong路由转发没有绑定项目端口, ...

  2. tomcat部署安全证书文件（阿里云SSL证书）

    1.下载安全证书文件: 这里使用的是阿里云SSL证书(免费一年) 2.把下载的压缩包进行解压 3.将pfx文件拷贝至服务器 4.利用jdk将pfx转jks 5.cmd进入命令行 6.切换至jdk的bi ...

  3. delphi mysql

    Delphi2006连接Mysql5.1 2．DBExpress+dbxopenmysql50.dll可能很多人会奇怪,dbxopenmysql50.dll是什么东东?DBExpress不就是数据库连 ...

  4. NX二次开发-UFUN圆弧矩阵标记、起始角和结束角(弧度测量)、圆弧中心坐标和圆弧半径UF_CURVE_ask_arc_data(边可以用)

    1 NX11+VS2013 2 3 #include <uf.h> 4 #include <uf_ui.h> 5 #include <uf_modl.h> 6 #i ...

  5. NX二次开发-关闭信息窗口UF_UI_close_listing_window

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //打开信息窗口 UF_UI_open_listing_window() ...

  6. Annotation详解

    转自:http://www.doc88.com/p-995532241886.html 首先我们定义一个简单的注解 package com.qjy.annotation; import java.la ...

  7. Unity shader之金属质感衣服

    一套QQ飞车的衣服,模仿其效果写的shader,效果如下: 部分shader如下: Shader "qq/Cloth" { Properties { _MainTex (" ...

  8. Day 9 :初识函数

    Python函数:1.函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 2.函数能提高应用的模块性,和代码的重复利用率. Python提供了许多内建函数,比如print().但你也可 ...

  9. BAT大神推荐：看懂英文文档，每天只需要10分钟做这件事……

    程序员这个行业是很特殊的.之所以说特殊,就是因为它所有的技术大多来自欧美,所以最主流,最新鲜,最正确的技术文章都是英文,遗憾的是,大部分还没有译本. 有些译文还比较差.与其等待别人的翻译,不如直接阅读 ...

  10. java笔试之从单向链表中删除指定值的节点

    输入一个单向链表和一个节点的值,从单向链表中删除等于该值的节点,删除后如果链表中无节点则返回空指针. 链表的值不能重复 构造过程,例如 1 -> 2 3 -> 2 5 -> 1 4  ...