简单的图片、文字滚动效果

最新推荐文章于 2022-09-21 13:45:55 发布
最新推荐文章于 2022-09-21 13:45:55 发布
阅读量286 收藏
点赞数
分类专栏： 效果片段集合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40289292/article/details/78109510
版权

通过marquee标签实现滚动效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <marquee direction="down" height="800px"><!--移动到屏幕中央位置消失-->
            这是个傻逼
            </marquee>
            <marquee id="a"  onmouseover="a.stop()" onmouseout="a.start()">
                <img src="img/成品.jpg" />
            </marquee>
            <marquee behavior=" alternate">
                <img src="img/成品.jpg" />
            </marquee>
            <marquee behavior="scroll">
                <img src="img/成品.jpg" />
            </marquee>
            <marquee behavior="slide">
                <img src="img/成品.jpg" />
            </marquee>
    </body>
</html>
明天早晨喝牛奶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让文字在图片上滚动显示
YuJar的专栏
04-14 1801
1、以源码方复制粘贴以下代码。2、源码中背景图片地址和文字换成自己想要的。3、回到设计窗口，调整文字和图片。4、相关属于可以自己修改。输入文字
php生成滚动文字图片,图片上加滚动文字,图片自动播放加上滚动文字的视频,图片加滚动字幕...
weixin_31574149的博客
03-27 607
每次小编一到周五心情就特别的兴奋，不知道大家是不是也跟小编一样呢！哈哈哈哈，但是该做的工作还是要认真做完呀，今天就来告诉大家，怎么制作图片上添加滚动文字的视频哦，没错，就是图片在自动播放，然后文字就显示在图片上面滚动着播放哦，继续往下看吧！图片加滚动文字观看：双击运行软件，在软件开始界面中，选择“宽屏幕(16:9)”界面。软件可以从上面的下载地址中，下载到电脑中。接着就会进入到编辑界面，点击“导入...
html 文字、图片水平无限滚动
热门推荐
Aliguagua的博客
12-16 2万+
html 文字、图片水平无限滚动经常在淘宝、京东的app页面中看见水平的广告轮播和中奖信息的轮播。我知道的实现这种无限滚动效果的方法有三种： 使用CSS3样式实现 使用js实现 marquee标签（好像不推荐使用了，我没用过，百度可以找到挺多相关博客的） 1.方式不管是用css实现还是js，实现方式是差不多的。为了让无限循环滚动时内容衔接更好一点，滚动内容会有两份一模一样的，大概步骤如下： 2.C
在图片上加滚动文字html,如何让文字在图片上滚动
weixin_42318712的博客
06-10 3417
如何让文字在图片上滚动要想实现让文字在图片上滚动，可以按下方法操作：点击发表文章，出现文章发表框，把显示源代码的小框勾上，然后把下面这个代码粘贴上去：borderColor=#FF0011 height=330 width=500border=1>background=背景图片链接地址>代码说明：代码的第一行图片框的属性，borderColor、height、width和border几...
文字/图片向上无限循环滚动
ai125073509的博客
11-26 2330
<!doctype html> <html> <head> <meta charset="utf-8"> <title>文字/图片向上无限循环滚动</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" language="javascript"></script>
jquery实现多行文字图片滚动效果示例代码
10-25
多行文字图片滚动效果的实现方法有很多，本例与大家分享的是jquery实现的具体步骤，很实用的
js+div实现文字滚动和图片切换效果代码
10-23
主要介绍了js+div实现文字滚动和图片切换效果代码,涉及javascript鼠标事件及页面元素图片滚动效果实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
一个jquery实现的不错的多行文字图片滚动效果
10-25
本节与大家分享的多行文字图片滚动效果，基于jquery实现，比较实用，有喜欢的朋友可以收藏下
多种JQuery循环滚动文字图片效果代码
11-24
不过效果还是可以的，如下（效果图上传后都加速了，实际效果比这个要慢很多）：  html代码如下： <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>循环...
HTML 实现文字滚动效果(跑马灯)
grootbaby
12-17 5430
语法： &lt;marquee&gt;...&lt;/marquee&gt; 说明： 在 marquee 标记之间添加要进行滚动的内容 重要属性： 1.滚动方向direction（包括4个值：up、 down、 left和 right） &lt;marquee direction="滚动方向"&gt;...&lt;/marquee&gt; 2.滚动方式behavior（scr...
文字图片自动向上滚动
jl0803的专栏
09-21 148
文字图片自动向上滚动
title标签的怎么实现文字滚动效果
zlq_CSDN的博客
03-29 621
在我实现QQ音乐官网的时候，遇到了这样的问题，就是title标签中文字过长时，如何实现文字的滚动效果呢？别慌，看下面的代码解析： //我在动态的设置title标签中的内容，可以将text()中的内容看做是string $("head title").text(" 正在播放 "+$item.get(0).music.name+"-"+$item.get(0).music.singer); /...
文字 图片 无缝滚动
小熊猫
07-29 344
*{margin:0px;padding:0px;border:0px;}body{font-size:12px}.coupons .right ul{ padding-left:20px; padding-right:20px; overflow:hidden;}#demo1{height:auto;text-align:left;}#demo2{height:auto;text-align:l
简单的页面跳转效果
qq_40289292的博客
09-30 1279
在几个HTML里写上着段代码，再更改一下跳转页面链接，就可以达到一个幻灯片效果。
简单的打地鼠游戏
qq_40289292的博客
10-13 514
简单的打地鼠游戏
通过setInterval和clearInterval实现的计时效果
qq_40289292的博客
10-13 440
计时效果
简单的表单实例
qq_40289292的博客
09-27 437
简单的表单实例
鼠标移动div效果：鼠标拖曳效果
qq_40289292的博客
09-26 394
通过简单的鼠标事件，获取实时的鼠标坐标，和实时的div坐标，实现鼠标对div的拖曳效果。
页面侧滑效果
qq_40289292的博客
09-26 390
页面侧滑效果
js文字描述图片滚动播放特效设计
最新发布
06-12
要实现文字描述图片滚动播放特效，可以使用以下步骤： 1. 创建一个包含文本和图片的容器。 2. 使用CSS设置容器的宽度和高度，以及文本和图片的位置。 3. 创建一个包含所有文本和图片的数组。 4. 使用JavaScript编写一个函数，来循环遍历该数组。 5. 在每次循环中，将当前文本和图片的位置向左移动一定的距离，直到到达容器的边缘。 6. 在到达容器边缘后，将该文本和图片放置在容器的右侧。 7. 循环遍历该数组，直到所有文本和图片都被展示。 以下是一个简单的示例代码： HTML: ```html <div class="scroll-container"> <div class="scroll-item"> <img src="image1.jpg" alt="Image 1"> <p>Text 1</p> </div> <div class="scroll-item"> <img src="image2.jpg" alt="Image 2"> <p>Text 2</p> </div> <div class="scroll-item"> <img src="image3.jpg" alt="Image 3"> <p>Text 3</p> </div> </div> ``` CSS: ```css .scroll-container { width: 500px; height: 300px; overflow: hidden; } .scroll-item { float: left; width: 250px; height: 300px; position: relative; } .scroll-item img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .scroll-item p { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; text-align: center; } ``` JavaScript: ```javascript const container = document.querySelector('.scroll-container'); const items = document.querySelectorAll('.scroll-item'); const speed = 0.5; let scrollPos = 0; function scroll() { scrollPos += speed; items.forEach((item) => { item.style.transform = `translateX(${-scrollPos}px)`; if (scrollPos >= item.offsetWidth) { scrollPos = 0; item.style.transform = `translateX(${container.offsetWidth}px)`; } }); requestAnimationFrame(scroll); } scroll(); ``` 在上面的代码中，我们使用了CSS来设置了容器的宽度和高度，以及文本和图片的位置。然后，使用JavaScript编写了一个名为scroll()的函数，来循环遍历包含文本和图片的数组。在每次循环中，将当前文本和图片的位置向左移动一定的距离，直到到达容器的边缘。在到达容器边缘后，将该文本和图片放置在容器的右侧。最后，使用requestAnimationFrame()方法来实现动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值