zoukankan html css js c++ java

文字横向滚动和垂直向上滚动

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>js实现文字超过显示宽度每间隔1s自动向左滚动显示</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        max-width: 640px;
        margin: 0 auto;
    }

    .pad_right {
        padding-right: 2em;
    }

    #scroll_div {
        height: 26px;
        overflow: hidden;
        white-space: nowrap;
        width: 535px;
        margin-left: 10px;
    }

    #scroll_begin,
    #scroll_end {
        display: inline;
    }
    </style>
</head>

<body>
    <div id="scroll_div" class="fl">
        <div id="scroll_begin">
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
        </div>
        <div id="scroll_end"></div>
    </div>
    <script type="text/javascript">
    //文字横向滚动
    function ScrollImgLeft() {
        var speed = 50;
        var MyMar = null;
        var scroll_begin = document.getElementById("scroll_begin");
        var scroll_end = document.getElementById("scroll_end");
        var scroll_div = document.getElementById("scroll_div");
        scroll_end.innerHTML = scroll_begin.innerHTML;

        function Marquee() {
            if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
                scroll_div.scrollLeft -= scroll_begin.offsetWidth;
            else
                scroll_div.scrollLeft++;
        }
        MyMar = setInterval(Marquee, speed);
        scroll_div.onmouseover = function() {　　　　　　　
            clearInterval(MyMar);　　　　　
        }　　　　
        scroll_div.onmouseout = function() {　　　　　　　
            MyMar = setInterval(Marquee, speed);　　　　　　　　　
        }
    }
    ScrollImgLeft();
    </script>
</body>

</html>

效果图：

原链接：http://www.jb51.net/article/74683.htm

二、垂直滚动：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>垂直滚动</title>
    <style type="text/css">
    #gongao {
        width: 1000px;
        height: 110px;
        overflow: hidden;
        line-height: 30px;
        font-size: 13px;
        font-family: '宋体';
        background: #DDE5ED;
        color: #0C77CF;
        font-weight: bold;
    }
    </style>
</head>

<body>
    <script type="text/javascript">
    //要想滑动不停  scroll_begin的内容高度必须大于scroll_div的高度
    function ScrollImgLeft() {
        var speed = 50;
        var scroll_begin = document.getElementById("scroll_begin");
        var scroll_end = document.getElementById("scroll_end");
        var scroll_div = document.getElementById("scroll_div");
        scroll_end.innerHTML = scroll_begin.innerHTML;

        function Marquee() {
            //scrollTop滑动条起点向下滑动的距离 当滑动条滑动的距离为一个div的高度时 即一个div显示完后 
            //迅速重置滑动条的起点为最上端 重新显示第一个div内容 视觉上达到滚动的效果
            if (scroll_end.offsetHeight - scroll_div.scrollTop <= 0)
                scroll_div.scrollTop -= scroll_begin.offsetHeight;
            else
                scroll_div.scrollTop++;
        }
        var MyMar = setInterval(Marquee, speed);
        scroll_div.onmouseover = function() { clearInterval(MyMar); }
        scroll_div.onmouseout = function() { MyMar = setInterval(Marquee, speed); }
    }
    </script>
    <div id="gongao">
        <div style="200px;height:100px;margin:0 auto;white-space: nowrap;overflow:auto;" id="scroll_div" class="scroll_div">
            <div id="scroll_begin">
                <table>
                    <tr>
                        <td>1.111jjdkkdl经典款进口</td>
                    </tr>
                    <tr>
                        <td>2.222kdal经济快递就经济快递来</td>
                    </tr>
                    <tr>
                        <td>3.333jjdkkdl经典款进口</td>
                    </tr>
                    <tr>
                        <td>4.444kdal经济快递就经济快递来</td>
                    </tr>
                    <tr>
                        <td>5.555jjdkkdl经典款进口</td>
                    </tr>
                    <tr>
                        <td>6.666kdal经济快递就经济快递来</td>
                    </tr>
                </table>
            </div>
            <div id="scroll_end"></div>
        </div>
        <script type="text/javascript">
        ScrollImgLeft();
        </script>
    </div>
</body>

</html>

效果图：

第三个例子，垂直向上滚动：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>jQuery实现消息列表循环垂直向上滚动</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            movedome();
        });

        function movedome() {
            var margintop = 0;//上边距的偏移量
            var stop = false;
            setInterval(function () {
                if (stop == true) {
                    return;
                }
                $("#notice").children("li").first().animate({ "margin-top": margintop-- }, 0, function () {
                    var $li = $(this);
                    if (!$li.is(":animated")) {//第一个li的动画结束时
                        if (-margintop > $li.height()) {
                            $li.css("margin-top", "0px").appendTo($("#notice"));
                            margintop = 0;
                        }
                    }
                });
            }, 50);
            //鼠标放到快递信息(ul)上时
            $("#notice").hover(function () {
                $(this).css("cursor", "pointer");
                stop = true;//停止动画
            }, function () {
                stop = false;//开始动画
            });
        }
    </script>
</head>

<body>
    <style>
        ul {
            list-style: none;
            margin: 0;
            height: 30px;
            overflow: hidden;
        }

        li {
            height: 30px;
            line-height: 30px
        }
    </style>
    <ul id="notice">
        <li>这是一条消息0</li>
        <li>这是一条消息1</li>
        <li>这是一条消息2</li>
    </ul>
</body>

</html>

垂直向上滚动，停顿3秒显示一条

let scrollListWrap = $("#scrollListWrap");
    var objHeight = scrollListWrap.height();
    setInterval(function () {
        scrollListWrap.children('ul').animate({
            top: -objHeight
        }, 500, function () {
            $(this).css('top', 0).children('li:first').appendTo($(this))
        })
    }, 3000)

附加知识：

对象的几个的属性：
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

1.向左滚动

if(scroll_end.offsetWidth-scroll_div.scrollLeft
向左滚动
ScrollImgLeft();

2.向上滚动

if(scroll_end.offsetTop-scroll_div.scrollTop
向上滚动
ScrollImgTop();

css3无缝滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3无缝滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            overflow: hidden;
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        .list {
            position: relative;
            top: 0px;
            left: 0px;
            width: 200%;
            height: 100%;
            border: 1px solid #f00;
            list-style: none;
            animation: mymove 5s infinite linear;
        }

        .list li {
            width: 98px;
            height: 98px;
            border: 1px solid white;
            background: blue;
            float: left;
            vertical-align: middle;
            text-align: center;
            line-height: 98px;
            color: white;
            font-weight: 600;
        }

        @-webkit-keyframes mymove {
            from {
                left: 0px;
            }

            to {
                left: -500px;
            }
        }
    </style>
</head>

<body>

    <div class="wrap">
        <ul class="list">
            <li> 1 </li>
            <li> 2 </li>
            <li> 3 </li>
            <li> 4 </li>
            <li> 5 </li>
            <li> 1 </li>
            <li> 2 </li>
            <li> 3 </li>
            <li> 4 </li>
            <li> 5 </li>
        </ul>
    </div>
</body>

</html>

效果图：

查看全文

相关阅读:
学习笔录——大话设计模式——简单工厂模式
 学习笔录——大话设计模式——代理模式
 学习笔录——大话设计模式——装饰模式
 经典扫雷下载
 C# 实现敏感词过滤
 C# 时间戳的相关操作
 easyui-datetimebox 控件绑定双击事件实现自动选中当前日期时间
 OpenGL笔记（4）纹理
 LearnOpenGL笔记（3）着色器
 c# 值类型和引用类型笔记

原文地址：https://www.cnblogs.com/huanghuali/p/8510019.html