开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js图片跑马灯效果

原生JavaScript图片跑马灯效果是一种常见的网页动画效果，它可以让一组图片在页面上循环滚动显示。下面我将详细介绍这个效果的基础概念、优势、类型、应用场景以及如何实现和解决常见问题。

基础概念

跑马灯（Marquee）是一种文本或图像的滚动显示方式，通常用于新闻标题、广告等。原生JavaScript实现的跑马灯效果是通过定时器和DOM操作来控制图片的移动。

优势

灵活性：可以根据需求自定义滚动速度、方向和样式。
性能：相比使用Flash或其他插件，原生JavaScript实现的跑马灯效果对浏览器兼容性更好，性能更优。
可控性：开发者可以精确控制每一帧的动画效果。

类型

水平滚动：图片从左到右或从右到左滚动。
垂直滚动：图片从上到下或从下到上滚动。
多行滚动：多行文本或图片同时滚动。

应用场景

新闻网站：用于显示最新新闻标题。
广告展示：在网页顶部或底部循环播放广告图片。
产品展示：在电商网站展示热门产品。

实现示例

以下是一个简单的水平滚动跑马灯效果的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片跑马灯</title>
    <style>
        #marquee {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }
        #marquee img {
            width: 200px;
            height: auto;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="marquee">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <script>
        const marquee = document.getElementById('marquee');
        const images = marquee.getElementsByTagName('img');
        let totalWidth = 0;

        for (let img of images) {
            totalWidth += img.offsetWidth;
        }

        marquee.style.width = totalWidth + 'px';

        let position = 0;
        const speed = 1; // 滚动速度

        function scroll() {
            position -= speed;
            if (position <= -totalWidth) {
                position = 0;
            }
            marquee.style.transform = `translateX(${position}px)`;
            requestAnimationFrame(scroll);
        }

        scroll();
    </script>
</body>
</html>

常见问题及解决方法

图片加载延迟：确保所有图片在动画开始前已经加载完毕。
图片加载延迟：确保所有图片在动画开始前已经加载完毕。
滚动速度不一致：使用requestAnimationFrame代替setInterval或setTimeout，以确保动画流畅且性能更好。
兼容性问题：确保CSS属性和JavaScript方法在不同浏览器中都能正常工作。可以使用Polyfill或Modernizr来处理兼容性问题。

通过以上方法，你可以实现一个简单且高效的图片跑马灯效果，并解决常见的实现问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

原生JS实现图片跑马灯特效

今天给大家分享一个用原生JS实现的图片跑马灯特效，效果如下：实现的代码如下，欢迎大家复制粘贴。原生...JS实现图片跑马灯特效 * { padding: 0; margin...oUp = getClass('up'); //获取向下箭头 var oDown = getClass('down'); //获取图片容器...('ul')[0]; //获取图片列表项 var oLi = oUl.getElementsByTagName('li'); var

5.6K1 0

原生js实现图片轮播效果

-- 图片部分,style部分设置便于js中改变偏移量，从而实现图片轮播--> 14 15...-- 箭头部分，实现下一张，上一张效果 --> 25 < 26...-- html body部分加载完成，最后调用js,进行操作；否则无法有效操作 --> 40 js"></script...{ 92 background-color: red; 93 } 94 .point span:active{ 95 background-color: gold; 96 } 1.js...= function() { 17 prev_pic(); 18 } 19 20 // 函数实现下一张浏览效果 21 function next_pic() { 22 // 最后一张

17.1K6 0

js实现跑马灯效果

2015-04-07 11:42:58 在我们浏览网页的时候，经常会看到照片循环播放的效果，这种效果有时候也会应用在商品的展示，通过图片的轮播可以有效的展示所有图片，并且节约网页空间，同时优化了网页的视觉效果...; height: 100px; display:block;} a:hover{ background: url(02.jpg) no-repeat;} 这段简单的代码就实现了这种图片轮播的效果...，其实这种效果还有一个别名，就是我这个标题所说的跑马灯。...有兴趣的朋友还可以拓展一下，把table改为div或者其他形式，在增加一下js特效也非常好。

6K2 0

原生图片详情定位效果

先来看看效果图：图片需要一些位置计算.. 参考https://www.cnblogs.com/wang715100018066/p/13607330.html 的图片详情效果。。...显然没有完全一样但是凑合吧后面在优化比较关键的api还是之前计算图片位置的文章相关的api - getBoundingClientRect 直接上代码吧： `; document.body.style.overflow = "hidden"; // 2.计算垂直居中的偏移值进行动画效果...效果图: 图片上代码： `; document.body.style.overflow = "hidden"; // 2.计算垂直居中的偏移值进行动画效果

3361 0

原生JS实现分页效果

做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生...JS如何实现一个分页效果呢？...接下来给大家分享一段分页代码实现下面的效果。 ? 原生...JS实现分页效果 a { margin: 5px; }

12.4K1 0

圆盘时钟效果原生JS

圆盘时钟旋转时钟数字时钟写在前面仿荣耀手机时钟，设计的同款时钟效果实现效果 ?...背景采用的是一个炫彩流光的效果，利用了CSS3新增的动画效果这部分的炫彩流光效果在之前的博客中有详细讲到炫彩流光效果指针时钟通过定位将三根针重叠在一起，下端对齐都摆在原点，通过transfrom-origin...+ (rotateM / 60)) + 'deg' + ')' 就像这样把分针旋转了多少反馈给时针，60分钟一个小时，所以是除以60 旋转时钟这里采用的是clip-path属性采取另一半的圆，圆环的效果采用的是大小圆的思路...226,20,233),rgb(41, 41, 41)); clip-path: inset( 0 50% 0 0 ); transform-origin: center center; } JS...，圆环的实现，也只是通过了简单的裁剪，想不到实现圆弧的效果代码有点长，如需完整代码，可以留言或私信

11.7K2 0

原生JS实现魔方效果

给大家分享一个用原生JS实现的魔方效果，效果如下：以下是代码实现：原生JS实现魔方效果 // 文件夹images下存放6张图片

7.3K1 0

分别用Js和vue实现跑马灯效果

文章目录一、使用js实现二、使用vue实现跑马灯就是这条信息串首尾相连，向一个方向循环滚动。。。...实现跑马灯效果 .btn-start { text-align: center; color: white.../jquery.js"> 欢迎访问TwcatL的博客!!!...在上面的跑马灯效果中，当打开页面的时候，等待两秒钟，它会自动调用start方法，实现动起来的效果。 ② setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。.../vue.js"> js/jquery.js"> .btn-start {

1.7K1 0

JS实现图片弹窗效果

近期正在鼓捣个人网站，想实现进入网站自动弹出二维码的效果，类似下面这样： ?...中间磨磨唧唧从原生JS找到JS插件，浪费了不少精力和时间，但是也磕磕碰碰学到了些知识，建议读者：想学一下弹窗的JS实现代码的可以看看前两小节，只想实现效果的，直接复制源码就行！...源码（就几行JS是核心代码，多数是CSS样式）： /* 触发弹窗图片的样式 */ #myImg { border-radius: 5px;...利用jquery.popup.js可以实现图中炫酷的动画效果, 支持animate.css。...">x js/jquery-1.11.0.min.js" type="text/javascript"> <script

23.8K3 0

原生javascript实现图片轮播效果代码

前几天用jquery做了一个JS的图片轮播效果，现在用原生的javascript代码实现同样的功能，当练习用吧，代码写得不是很满意。...看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果，代码实在是优雅，相比较差别一下就凸显了，下次再把他代码的精髓偷过来，嘿嘿。...【原理简述】 html和css跟JQuery实现图片轮播效果里面的一样，略去。主要是几个公共函数，渐显和渐失，用闭包实现。至于主体逻辑部分，非常一般。...opacity=" + level + ")"; } else { elem.style.opacity = level / 100; } } 复制代码【调用方法】 //count:图片数量...，wrapId:包裹图片的DIV,ulId:按钮DIV,infoId：信息栏 babyzone.scroll(count,wrapId,ulId,infoId); babyzone.scroll(4

3.8K8 0

Android TextView跑马灯效果

测试跑马灯效果 Hello World! Hello World!...app:layout_constraintTop_toTopOf="parent"/> android:marqueeRepeatLimit=“marquee_forever” 无限循环以上即可实现跑马灯效果...，但是当页面中有多个textview跑马灯效果的时候，只有第一个才能获取到焦点，这个时候就需要自定义修改一下textview。

1K1 0

三.跑马灯效果练习

device-width, initial-scale=1.0"> 跑马灯效果.../lib/vue-2.4.0.js"> <input type="button" value="启动

5951 0

TextView设置跑马灯效果

TextView设置跑马灯效果需求分析实现效果具体实现 android.xml代码关键属性介绍 android.xml用到的background资源 .java业务代码需求实现视频上方文字滚动效果...https://live.csdn.net/v/embed/204299 android跑马灯效果分析可使用TextView来实现这个跑马灯效果实现效果文字底部设置灰色透明背景显示...，名称以及奖励金额使用高亮色号显示 https://live.csdn.net/v/embed/204304 TextView跑马灯效果示例具体实现 android.xml代码关键属性介绍 android:ellipsize="marquee" //设置跑马灯显示效果...必须单行显示 android:marqueeRepeatLimit="marquee_forever" //实现无限循环 android.xml用到的background资源 Android实现页面渐变效果

1.1K2 0

原生js实现图片懒加载

目的：大量图片的网站，一次性加载所有图片会存在速度变慢，卡顿等问题。...我们可以使用图片懒加载技术，只加载视口内的图片，其余图片用默认小图片（由于所有图片都使用这一张小图片，只会发送一次请求，不会增加性能负担。）或者骨架屏代替。...等图片滚动到可视区后，再给图片url赋值。...这样优化了前端加载速度，提高了性能核心思路： scrollTop 判断图片滚动的距离, innerHeight求当前视口高度，offsetTop得到图片相对于父元素的位置，然后scrollTop +...-- 图片地址" src="小图片地址"/> --> <img src="./images/1pxImg.png" data-url=".

6.5K2 0

vuejs基础-跑马灯效果

html> js...v-text="msg"> new Vue({ el:"#app", data:{ msg:"这是一个跑马灯效果

9131 0

原生JS实现Tab切换效果和模态框效果

原生JS实现Tab切换效果效果展示 <!...tabPanels[index].classList.add('active'); } }) 原生...JS实现模态框效果效果展示 <!

9.8K5 0

原生JS实现图片懒加载

通过原生JS实现懒加载 <!

5.3K1 0

原生JS实现图片爆炸特效

分享一个由原生JS实现的图片爆炸特效，效果如下：实现的代码如下：原生JS实现图片爆炸特效 var index = 0; var zIndex = 9999999; //本地图片路径...function show(x, y) { var R = x; var T = y; //爆炸前生成下一张图片...zIndex--; index++; //如果三张不同的图片切换完，切换到第一张 if (imgIndex

18.5K2 0

跑马灯 TextView效果设计

https://blog.csdn.net/u011415782/article/details/48264373 之前有看到有的应用具有跑马灯的效果，这里参考了一下网上的资源，进行的简单的设计...wrap_content" android:text="@string/hello_world" /> 补充： Android系统中TextView实现跑马灯效果

7552 0

手写原生代码专题 | 图片拖拽效果（一）

一、系列介绍前端的小伙伴们，我想大多数都是颜值控吧，看到一个漂亮或新奇的效果，都想搞明白是怎么实现的吧。...总之练习这些基础的项目并不low，放低姿态，从最基础的原生代码开始复习实践，帮助我们梳理基础知识，日积月累，一定会有不少收获。...本系列文章小编将和大家一起从最基础的原生代码实践，做一些小的项目，从最基础的实践中复习和掌握前端的一些基础知识，只有熟练了才能理解前端的本质，学习前端新的知识和框架时就能更快的上手。...二、图片拖拽效果介绍本篇文章，如下视频所示，界面有5个方格拖放区域，我们可以在这些区域里拖拽图片，当鼠标拖动图片时，图片周围有灰色的粗边框效果提示用户当前元素可拖动，在可放置图片的目标方格会出现白色的虚线边框并且背景色更改为黑色...dragleave事件；如果被拖动元素被放到了目标上，则会触发drop事件）四、开始编写代码复习完基础知识后，我们来开始动手实践吧，我们依次创建3个文件 index.html，style.css，script.js

2.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭