公告循环向上滚动

超、凢脫俗 2022-07-28 11:48 172阅读 0赞

html:

<div class="scroll-wrap" style="height: 16px; overflow: hidden;">
        <ul class="scroll-con fn-left" style="margin-top: 0px;">
                    <li style="height: 16px; line-height: 16px; overflow: hidden;">
                        <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家1</a>
                    </li>
                    <li style="height: 16px; line-height: 16px; overflow: hidden;">
                        <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家2</a>
                    </li>
                    <li style="height: 16px; line-height: 16px; overflow: hidden;">
                        <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家3</a>
                    </li>
                    <li style="height: 16px; line-height: 16px; overflow: hidden;">
                        <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家4</a>
                    </li>
    
    
        </ul>
    </div>

js:

引入jquery文件cdn

<script src="http://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script><script>
        /*公告滚动*/
        $(function(){
            var len = $(".scroll-con li").length;
            console.log(len);
            if(len > 1){
                textRoll=function(){
                    $(".scroll-wrap").find(".scroll-con").animate({
                        marginTop : "-16px"
                    },500,function(){
                        $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
                    });
                };
                var roll= setInterval('textRoll()',1000);
                $(".scroll-con li").mouseenter(function() {
                    clearInterval(roll);
                }).mouseout(function(){
                    clearInterval(roll);
                    roll= setInterval('textRoll()',1000);
                });
            }
        })
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app实现公告文本超出从右向左循环滚动

用的是css3的动画效果，也可以用定时器或者uni.createAnimation来实现，但是这两种方法都比较容易造成卡死。 html代码 <view class=

╰半橙微兮°/ 2023年02月11日 08:57/ 0 赞/ 31 阅读

相关基于jQuery实现内容向上滚动

基于jQuery实现内容向上滚动，效果如下图所示 ![在这里插入图片描述][20210714121935389.gif] 1，页面需要引入jquery.liMarquee.

我不是女神ヾ/ 2023年01月23日 10:47/ 0 赞/ 155 阅读

相关页面列表实现向上无缝滚动

[https://blog.csdn.net/qq\_43729779/article/details/104990194][https_blog.csdn.net_qq_43

我不是女神ヾ/ 2022年10月16日 05:55/ 0 赞/ 241 阅读

相关 html滚动信息栏,公告滚动.html

dodou-移动框架 \scrollDiv\{height:40px;line-height:40px;overflow:hidden; background:url(ima

系统管理员/ 2022年10月06日 10:53/ 0 赞/ 159 阅读

相关 Android滚动字幕公告控件

Android滚动字幕公告控件效果 Gradle 使用属性地址效果字体长度过大滚动字体，结束

Dear 丶/ 2022年09月17日 06:26/ 0 赞/ 254 阅读

相关公告循环向上滚动

html: <div class="scroll-wrap" style="height: 16px; overflow: hidden;">

超、凢脫俗/ 2022年07月28日 11:48/ 0 赞/ 173 阅读

相关向上滚动的新闻提示消息

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title>

超、凢脫俗/ 2022年05月29日 08:08/ 0 赞/ 164 阅读

相关 js实现无缝向上滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年05月13日 08:36/ 0 赞/ 246 阅读

相关 js向上滚动消息框代码

js向上滚动消息框代码 js向上滑动展示，实现滚动展示信息，新闻动态或者通知公告。如下样式：引入样式 <link rel="stylesheet" ty

傷城~/ 2022年04月13日 04:14/ 0 赞/ 313 阅读

相关 vue weex 新闻公告向上轮播

<template> <div> <div class="news_box"> <di

梦里梦外;/ 2021年09月17日 22:22/ 0 赞/ 317 阅读