向上滚动的新闻提示消息

最新推荐文章于 2024-07-14 02:36:05 发布
原创 最新推荐文章于 2024-07-14 02:36:05 发布 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{margin:0;padding:0}
#slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc}
#slide p{height:34px;line-height:34px;overflow:hidden}
#slide span{float:right}
</style>
</head>
<body>

<div id="slide">
    <div id="slide1"> 
        <p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
        <p><span>领取了烈焰双11礼包</span>2、s376***</p>
        <p><span>领取了烈焰双11礼包</span>3、dqx5***</p>
        <p><span>领取了烈火战神双11礼包</span>4、说好〃不沋伤</p>
        <p><span>领取了街机三国双11礼包</span>5、说好〃不沋伤</p>
        <p><span>领取了烈焰双11礼包</span>6、gao6***</p>
        <p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
        <p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
        <p><span>领取了烈焰双11礼包</span>9、lais***</p>
    </div>
    <div id='slide2'></div>
</div>

<script>
    var speed=40
    var slide=document.getElementById("slide");
    var slide2=document.getElementById("slide2");
    var slide1=document.getElementById("slide1");
    slide2.innerHTML=slide1.innerHTML
    function Marquee(){
        if(slide2.offsetTop-slide.scrollTop<=0)
            slide.scrollTop-=slide1.offsetHeight
        else{
            slide.scrollTop++
        }
    }
    var MyMar=setInterval(Marquee,speed)
    slide.onmouseover=function(){clearInterval(MyMar)}
    slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>

</body>
</html>


用swiper写一个  自己引入swiper的css和Js


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="swiper.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .content {
      width: 350px;
      height: 200px;
      margin: 50px;
      background: red;
    }
    .swiper-container {
      width: 100%;
	    height:100%;
    }
    .swiper-slide {
      height: 30px;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="content">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
        <div class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
        <div class="swiper-slide">Slide 13</div>
        <div class="swiper-slide">Slide 14</div>
        <div class="swiper-slide">Slide 15</div>
        <div class="swiper-slide">Slide 16</div>
        <div class="swiper-slide">Slide 17</div>
        <div class="swiper-slide">Slide 18</div>
        <div class="swiper-slide">Slide 19</div>
        <div class="swiper-slide">Slide 20</div>
      </div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container',{
		slidesPerView: 'auto',
		freeMode: true,
    direction: 'vertical',
		loop: true,
    autoplay: {
      delay: 1000,
      disableOnInteraction: false,
    },
		scrollbar: {
      el: '.swiper-scrollbar',
    },
	});

  </script>
</body>
</html>

 

JS新闻公告文字逐条向上翻滚代码
11-08
JS新闻公告文字逐条向上翻滚代码 可以设置滚动速度 每次滚动几条和每行显示几条
js向上滚动消息框特效代码
03-20
这个特效通常应用于显示实时更新的信息，如通知、提示或者新闻更新，它会让新信息从底部向上滚动进入视区，旧信息则逐渐被推至顶部直至消失。这种滚动效果可以通过定时器和数组操作来实现，同时配合CSS样式调整元素...
向上滚动公告栏
weixin_30904593的博客
08-26 188
向上滚动公告栏 项目中需要用到类似公告栏的控件，能用的基本不支持多行显示，于是只好自己动手，苦于没有自定义过一个像样的控件，借鉴Android公告条demo，实现了多行向上滚动的控件。在原控件基础之上添加如下功能： 传入数据分页显示 添加Left Drawable 手指触摸事件处理 添加3D动画翻滚效果 效果图 源码 package com.a...
新闻消息向上滚动动画
weixin_33414202的博客
01-21 442
html部分 <div class="scrollWrap"> <ul :class="{ anim: animateFlag === true}" @mouseenter="animateStopHandle" @mouseleave="animateUpHandle" > <li>信息1</li> <li>信息2</li> <li>信息3</li> <li>信息4&
公告列表无缝向上滚动代码
qq_36022231的博客
12-19 377
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>公告列表无缝向上滚动代码</title> <style type="text/css"> ...
原生js实现公告栏向上滚动
陈大文的博客
10-17 3788
window.onload = function(){ //调用滚动条函数的界面 notice(".notice_ul",5);， } function notice(node,num){ //信息滚动，获取ul的dom元素 var news_move = document.querySelector(node); //获取li的高度 var li_height = news_mo
利用CSS3实现的文字定时向上滚动
09-24
这种技术可以广泛应用于新闻滚动条、提示信息展示、公告栏等多个场景。 总结以上知识点，实现CSS3文字定时向上滚动的要点包括： 1. 利用CSS3的关键帧动画属性（@keyframes）来定义动画。 2. 在动画中设置多个关键...
JS实现单行文字不间断向上滚动的方法
10-24
这种效果的应用场景非常广泛，例如新闻网站的滚动新闻、产品网站的标语展示、以及各种提示信息的展示等。 本文通过实例代码，不仅向读者详细展示了如何利用JavaScript实现文本的不间断向上滚动效果，还解释了其背后...
jQuery实现列表自动滚动循环滚动展示新闻
10-25
通过上述知识点，我们可以用jQuery编写一个简洁有效的自动滚动循环滚动新闻展示效果。在实际应用中，可能还需要考虑更多的用户体验和浏览器兼容性问题，例如在不同分辨率的屏幕上展示效果的适配、触屏设备的手势操作...
文字无间隙向上滚动样例
07-28
标题“文字无间隙向上滚动样例”提示我们这个压缩包可能包含一个实现文字无间隙向上滚动效果的HTML示例。这种效果通常用于显示实时更新的信息，如新闻标题、股票行情或者天气预报等。我们将深入探讨如何创建这样的...
基于Bootstrap的垂直滚动新闻特效
07-06
基于Bootstrap的垂直滚动新闻特效
bootstrap文字上下滚动，类似新闻滚动
01-10
本文档适用于list-group+list-group-item组合形式，但不适合在item中再次放置col样式，该问题本人暂时未解决，有解决方法请及时告知本人。
jQuery实现的上下滚动公告栏
11-21
用jQuery实现的上下滚动公告栏。主要用jQuery中的animate()方法和setInterval()实现的，代码简单使用。
新闻一段时间向上滚动效果
12-12
BODY { FONT-SIZE: 12px; MARGIN: 0px; OVERFLOW: visible; LINE-HEIGHT: 140% } UL { FONT-SIZE: 12px; MARGIN: 0px; OVERFLOW: visible; LINE-HEIGHT: 140% } LI { FONT-SIZE: 12px; MARGIN: 0px; OVERFLOW: visible; LINE-HEIGHT: 140% } A:link { FONT-SIZE: 12px; COLOR: #006699; FONT-FAMILY: Tahom
HTML5+SWIPER仿网易新闻横滑翻页及联动
01-12
因项目需求自己整理了一套仿网易新闻的闻横滑翻页，联动导航，用到了swiper.js zepto.js scroll.js效果非常不错。效果图请看
公告上下滚动
10-27
文字上下左右间歇性滚动，适用于网站公告板块。demo为移动端
现代简约风网页设计的滚动提示设计指南
light86的专栏
03-26 801
现代简约风网页设计的滚动提示设计指南
vue3中的文字滚动播报
黄钢的博客
03-14 2173
之前UI框架一直使用的elementPlus，有个需求，需要在页面上写个滚动播放新闻的功能，发现UI框架居然没有这个组件。花了一下午，在ChatGPT的帮助下，总算写成功了，先看最终展示效果web页面滚动播放文字视频被压缩的稀烂了，GIF又没法上传，截个图看看吧直接上代码：
vue3实现无缝滚动列表（大屏数据轮播场景）
最新发布
蒾酒的博客
07-14 6299
vue3目前可以通过第三方组件来实现这个需求。下面介绍一下这个第三方滚动组件--是一个用于 Vue 3 的插件，用于实现无缝滚动的组件。它可以让内容在水平或垂直方向上无缝滚动，适用于展示轮播图、新闻滚动、图片展示等场景。：在内容超出容器宽度或高度时，可以实现自动无缝滚动，形成连续的视觉效果。：提供了多种配置选项来控制滚动的速度、方向、内容显示方式等。：支持响应式设计，可以根据父容器的大小自动调整内容的显示和滚动效果。：内容可以是任意的 Vue 组件或 HTML 元素，可以自定义每一项的样式和内容。
兼容多浏览器的无缝向上滚动文字实现
它可以让网页上的某些信息（如新闻滚动栏、提示信息等）持续不断地向上移动，从而吸引用户的注意力。关键在于实现方式要确保兼容性，即所编写的代码能够在不同的浏览器环境中（如Chrome、Firefox、Internet Explorer...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值